react技术栈升级的过程
第一阶段：css
react15+react-router2+redux3+webpack1 升级到 react16+react-router3+redux4+webpack4html
1.react15升级到16 遇到的坑：
在react16中去除contextTypes ，致使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会自动添加进发布模式的html文件中，原来的html文件中没有，前提必须是mode=prodution 才生效。
（4）webpack4中把内置的webpack.DefinePlugin({'process.env':{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry平级的mode属性，来区分环境。
mode的value有none/development/production 这3中属性，若要在系统中使用，则用"process.env.NODE_ENV"变量来获取，比较奇葩。
（5）entry的路径原来的path.resolve(path.resolve(path.resolve(path.resolve(__dirname)),'src')，'app') 应替换为相对路径的'./src/App.jsx'。
（6）output的路径原来的
path.resolve(path.resolve(__dirname),"dist") 应替换为 path.join(path.join(__dirname),"dist")。
3. 最终的不一样环境配置文件以下：
开发环境：node
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); //发布文件所存放的目录
module.exports = {
devtool: '#eval-source-map',
stats: {
children: true
},
mode:"development",
entry:{
app:APP_FILE
},
output: {
publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
path:BUILD_PATH , //编译到当前目录
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选项参数能够定义多大的图片转换为base64
limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath: 'images' //定义输出的图片文件夹
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({ //根据模板插入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'], //后缀名自动补全
}
};
sit环境：react
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css
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); //发布文件所存放的目录
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, //编译好的文件，在服务器的路径,这是静态资源引用路径
path:BUILD_PATH , //编译到当前目录
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选项参数能够定义多大的图片转换为base64
limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath: 'images' //定义输出的图片文件夹
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: '../index.html', //生成的html存放路径，相对于 path
template: './src/template/index.html', //html模板路径
inject: 'body',
hash: true,
})
],
optimization: {
//提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
}
};
uat环境：webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css
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); //发布文件所存放的目录
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, //编译好的文件，在服务器的路径,这是静态资源引用路径
path:BUILD_PATH , //编译到当前目录
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选项参数能够定义多大的图片转换为base64
limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath: 'images' //定义输出的图片文件夹
}
}]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: '../index.html', //生成的html存放路径，相对于 path
template: './src/template/index.html', //html模板路径
inject: 'body',
hash: true,
})
],
optimization: {
//提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
}
};
生产环境：web
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css
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); //发布文件所存放的目录
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, //编译好的文件，在服务器的路径,这是静态资源引用路径
path:BUILD_PATH , //编译到当前目录
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选项参数能够定义多大的图片转换为base64
limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
outputPath: 'images' //定义输出的图片文件夹
}
}]
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production') //定义编译环境
}
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "css/[name].[hash:6].css",
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: '../index.html', //生成的html存放路径，相对于 path
template: './src/template/index.html', //html模板路径
inject: 'body',
hash: true,
})
],
optimization: {
//提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
resolve: {
extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
}
};
4.升级后的package.json文件：express
{
"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"
]
}
相关文章
- 1. react技术栈
- 2. React技术栈
- 3. React 技术栈
- 4. react native 技术栈
- 5. React技术栈——webpack
- 6. react技术栈实践（2）
- 7. react技术栈实践（1）
- 8. 初探React技术栈（三）
- 9. React技术栈梳理
- 10. react技术栈学习
- 更多相关文章...
- • Hibernate的快照技术 - Hibernate教程
- • XML 相关技术 - XML 教程
- • Docker容器实战(一) - 封神Server端技术
- • 三篇文章了解 TiDB 技术内幕——说存储
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. react技术栈
- 2. React技术栈
- 3. React 技术栈
- 4. react native 技术栈
- 5. React技术栈——webpack
- 6. react技术栈实践（2）
- 7. react技术栈实践（1）
- 8. 初探React技术栈（三）
- 9. React技术栈梳理
- 10. react技术栈学习