資訊專欄INFORMATION COLUMN
摘要：第一階段升級到升級到遇到的坑在中去除，導(dǎo)致需要替換成。中把內(nèi)置的去掉，添加了和平級的屬性，來區(qū)分環(huán)境。的有這中屬性，若要在系統(tǒng)中使用，則用變量來獲取，比較奇葩。的路徑原來的，應(yīng)替換為相對路徑的。
第一階段：
react15+react-router2+redux3+webpack1 升級到 react16+react-router3+redux4+webpack4
1.react15升級到16 遇到的坑：
在react16中去除contextTypes ，導(dǎo)致this.context.router.push("/*") 需要替換成
this.props.router.push("/*") 。
2.webpack1升級到4遇到的坑：
（1）webpack4 中建議使用min-css-extract-plugin 分離css，sass等文件，取代插件extract-text-webpack-plugin 效率更高
（2）html-webpack-plugin 要升級到2.22.0及以上
（3）webpack4將webpack.optimize.CommonsChunkPlugin移除，使用和entry平級的optimization里的屬性splitChunks來把提取出來的樣式和common.js會(huì)自動(dòng)添加進(jìn)發(fā)布模式的html文件中，原來的html文件中沒有，前提必須是mode=prodution 才生效。
（4）webpack4中把內(nèi)置的webpack.DefinePlugin({"process.env":{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry平級的mode屬性，來區(qū)分環(huán)境。
mode的value有none/development/production 這3中屬性，若要在系統(tǒng)中使用，則用"process.env.NODE_ENV"變量來獲取，比較奇葩。
（5）entry的路徑原來的path.resolve(path.resolve(path.resolve(path.resolve(__dirname)),"src")，"app") 應(yīng)替換為相對路徑的"./src/App.jsx"。
（6）output的路徑原來的
path.resolve(path.resolve(__dirname),"dist") 應(yīng)替換為 path.join(path.join(__dirname),"dist")。
3. 最終的不同環(huán)境配置文件如下：
開發(fā)環(huán)境：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const APP_FILE = "./src/App.jsx"; //根目錄文件app.jsx地址
const PUBLIC_PATH = "/huishangchao/dist";
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, "src");
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發(fā)布文件所存放的目錄
module.exports = {
devtool: "#eval-source-map",
stats: {
children: true
},
mode:"development",
entry:{
app:APP_FILE
},
output: {
publicPath: PUBLIC_PATH, //編譯好的文件，在服務(wù)器的路徑,這是靜態(tài)資源引用路徑
path:BUILD_PATH , //編譯到當(dāng)前目錄
filename: "[name].js", //編譯后的文件名字
chunkFilename: "js/[name].[chunkhash:5].min.js",
},
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
include: SRC_PATH, //限制范圍，提高打包速度
exclude: /node_modules/
},
{
test:/.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(png|jpg|gif)$/,
use: [{
loader: "url-loader",
options: { // 這里的options選項(xiàng)參數(shù)可以定義多大的圖片轉(zhuǎn)換為base64
limit: 50000, // 表示小于50kb的圖片轉(zhuǎn)為base64,大于50kb的是路徑
outputPath: "images" //定義輸出的圖片文件夾
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({? //根據(jù)模板插入css/js等生成最終HTML
filename: "../index.html", //生成的html存放路徑，相對于 path
template: "./src/template/index.html", //html模板路徑
inject: "body",
hash: true,
})
],
resolve: {
extensions: ["*",".js", ".jsx", ".less", ".scss", ".css"], //后綴名自動(dòng)補(bǔ)全
}
};
sit環(huán)境：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包c(diǎn)ss
const APP_FILE = "./src/App.jsx"; //根目錄文件app.jsx地址
const PUBLIC_PATH = "/huishangchaoSit/dist/";
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, "src");
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發(fā)布文件所存放的目錄
module.exports = {
stats: {
children: true
},
mode:"production",
entry: {
app: APP_FILE,
common: [
"react",
"react-dom",
"react-router",
"redux",
"react-redux",
"redux-thunk"
]
},
output: {
publicPath: PUBLIC_PATH, //編譯好的文件，在服務(wù)器的路徑,這是靜態(tài)資源引用路徑
path:BUILD_PATH , //編譯到當(dāng)前目錄
filename: "[name].js", //編譯后的文件名字
chunkFilename: "js/[name].[chunkhash:5].min.js",
},
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
include: SRC_PATH, //限制范圍，提高打包速度
exclude: /node_modules/
},
{
test:/.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(png|jpg|gif)$/,
use: [{
loader: "url-loader",
options: { // 這里的options選項(xiàng)參數(shù)可以定義多大的圖片轉(zhuǎn)換為base64
limit: 50000, // 表示小于50kb的圖片轉(zhuǎn)為base64,大于50kb的是路徑
outputPath: "images" //定義輸出的圖片文件夾
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({? //根據(jù)模板插入css/js等生成最終HTML
filename: "../index.html", //生成的html存放路徑，相對于 path
template: "./src/template/index.html", //html模板路徑
inject: "body",
hash: true,
})
],
optimization: {
//提取出來的樣式和common.js會(huì)自動(dòng)添加進(jìn)發(fā)布模式的html文件中，原來的html沒有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ["*",".js", ".jsx", ".less", ".scss", ".css"], //后綴名自動(dòng)補(bǔ)全
}
};
uat環(huán)境：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包c(diǎn)ss
const APP_FILE = "./src/App.jsx"; //根目錄文件app.jsx地址
const PUBLIC_PATH = "/huishangchaoUat/dist/";
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, "src");
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發(fā)布文件所存放的目錄
module.exports = {
stats: {
children: true
},
mode:"production",
entry: {
app: APP_FILE,
common: [
"react",
"react-dom",
"react-router",
"redux",
"react-redux",
"redux-thunk"
]
},
output: {
publicPath: PUBLIC_PATH, //編譯好的文件，在服務(wù)器的路徑,這是靜態(tài)資源引用路徑
path:BUILD_PATH , //編譯到當(dāng)前目錄
filename: "[name].js", //編譯后的文件名字
chunkFilename: "js/[name].[chunkhash:5].min.js",
},
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
include: SRC_PATH, //限制范圍，提高打包速度
exclude: /node_modules/
},
{
test:/.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(png|jpg|gif)$/,
use: [{
loader: "url-loader",
options: { // 這里的options選項(xiàng)參數(shù)可以定義多大的圖片轉(zhuǎn)換為base64
limit: 50000, // 表示小于50kb的圖片轉(zhuǎn)為base64,大于50kb的是路徑
outputPath: "images" //定義輸出的圖片文件夾
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({? //根據(jù)模板插入css/js等生成最終HTML
filename: "../index.html", //生成的html存放路徑，相對于 path
template: "./src/template/index.html", //html模板路徑
inject: "body",
hash: true,
})
],
optimization: {
//提取出來的樣式和common.js會(huì)自動(dòng)添加進(jìn)發(fā)布模式的html文件中，原來的html沒有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ["*",".js", ".jsx", ".less", ".scss", ".css"], //后綴名自動(dòng)補(bǔ)全
}
};
生產(chǎn)環(huán)境：
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包c(diǎn)ss
const APP_FILE = "./src/App.jsx"; //根目錄文件app.jsx地址
const PUBLIC_PATH = "/huishangchao/dist/";
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, "src");
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //發(fā)布文件所存放的目錄
module.exports = {
stats: {
children: true
},
mode:"production",
entry: {
app: APP_FILE,
common: [
"react",
"react-dom",
"react-router",
"redux",
"react-redux",
"redux-thunk"
]
},
output: {
publicPath: PUBLIC_PATH, //編譯好的文件，在服務(wù)器的路徑,這是靜態(tài)資源引用路徑
path:BUILD_PATH , //編譯到當(dāng)前目錄
filename: "[name].js", //編譯后的文件名字
chunkFilename: "js/[name].[chunkhash:5].min.js",
},
module: {
rules: [
{
test: /.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader",
],
include: SRC_PATH, //限制范圍，提高打包速度
exclude: /node_modules/
},
{
test:/.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(png|jpg|gif)$/,
use: [{
loader: "url-loader",
options: { // 這里的options選項(xiàng)參數(shù)可以定義多大的圖片轉(zhuǎn)換為base64
limit: 50000, // 表示小于50kb的圖片轉(zhuǎn)為base64,大于50kb的是路徑
outputPath: "images" //定義輸出的圖片文件夾
}
}]
}]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production") //定義編譯環(huán)境
}
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({? //根據(jù)模板插入css/js等生成最終HTML
filename: "../index.html", //生成的html存放路徑，相對于 path
template: "./src/template/index.html", //html模板路徑
inject: "body",
hash: true,
})
],
optimization: {
//提取出來的樣式和common.js會(huì)自動(dòng)添加進(jìn)發(fā)布模式的html文件中，原來的html沒有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ["*",".js", ".jsx", ".less", ".scss", ".css"], //后綴名自動(dòng)補(bǔ)全
}
};
4.升級后的package.json文件：
{
"name": "hsc",
"version": "1.0.0",
"description": "hsc",
"main": "index.html",
"scripts": {
"dev": "node server.js",
"sit": "webpack --config webpack.config.sit.js --progress --colors --watch -p",
"uat": "webpack --config webpack.config.uat.js --progress --colors --watch -p",
"dist": "webpack --config webpack.config.dist.js --progress --colors --watch -p"
},
"repository": {
"type": "",
"url": ""
},
"author": "cheer",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-router": "3.2.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"ajv": "^6.0.0",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"clipboard": "^2.0.1",
"css-loader": "^1.0.0",
"express": "^4.16.3",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"isomorphic-fetch": "^2.2.1",
"jsx-loader": "^0.13.2",
"mini-css-extract-plugin": "^0.4.2",
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"promise-polyfill": "^8.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"url-loader": "^1.1.1",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.2.0",
"webpack-dev-server": "^3.1.7"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97689.html
摘要：本文以管理者的視角，與大家分享下我自年月入職小菜后，與前端同學(xué)一起是如何規(guī)劃團(tuán)隊(duì)的技術(shù)棧的，這條技術(shù)棧上的技能點(diǎn)又是如何在不同童鞋不同業(yè)務(wù)中生長出來的。 Scott 近兩年無論是面試還是線下線上的技術(shù)分享，遇到許許多多前端同學(xué)，由于團(tuán)隊(duì)原因，個(gè)人原因，職業(yè)成長，技術(shù)方向，甚至家庭等等原因，在理想國與現(xiàn)實(shí)之間，在放棄與堅(jiān)守之間，搖擺不停，心酸硬抗，大家可以找我聊聊南聊聊北，對工程師的宿命...
摘要：沒有耐心閱讀的同學(xué)，可以直接前往學(xué)習(xí)全棧最后一公里。我下面會(huì)羅列一些，我自己錄制過的一些項(xiàng)目，或者其他的我覺得可以按照這個(gè)路線繼續(xù)深入學(xué)習(xí)的項(xiàng)目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術(shù)軟文，閱讀需謹(jǐn)慎，長約 7000 字，通讀需 5 分鐘 大家好，我是 Scott，本文通過提供給大家學(xué)習(xí)的方法，...
摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會(huì)談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會(huì)拖慢性能，過度的性能優(yōu)化反而會(huì)有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...
摘要：作者也樹校對染陌素材也樹英布阿里云前端技術(shù)周刊由阿里云智能商業(yè)中臺體驗(yàn)技術(shù)團(tuán)隊(duì)整理編寫。如何在工作中快速成長致工程師的個(gè)簡單技巧工程師成長干貨，全文提綱如下，圖片來自阿里技術(shù)公眾號關(guān)于我們我們是阿里云智能中臺體驗(yàn)技術(shù)團(tuán)隊(duì)。 作者：@也樹 校對：@染陌 素材：@也樹、@英布 《阿里云前端技術(shù)周刊》由阿里云智能商業(yè)中臺體驗(yàn)技術(shù)團(tuán)隊(duì)整理編寫。 知乎：阿里云中臺前端/全棧團(tuán)隊(duì)專欄 Github...
閱讀 2252·2021-11-22 09:34
閱讀 2021·2021-09-22 15:22
閱讀 2022·2019-08-29 15:05
閱讀 2110·2019-08-26 10:43
閱讀 3411·2019-08-26 10:26
閱讀 886·2019-08-23 18:29
閱讀 3522·2019-08-23 16:42
閱讀 2001·2019-08-23 14:46
