webpack 3 升级 webpack4 个人笔记
1. webpack4升级完全指南
https://segmentfault.com/a/1190000014247030
2. Mobx useStrict is not a function
https://blog.csdn.net/greekmrzzj/article/details/79861787
3. babel-preset-env：你需要的唯一Babel插件
https://segmentfault.com/p/1210000008466178
升级步骤：
1. npm 升级 查看package.json所有包的最新包版本
npm install -g npm-check-updates
ncu -u
package.json文件包的版本会自动升级到最新版本
2. 参考 文章1 修改webpack.config.js
2.1 package.json 的script 可能需要修改
我的script是这样写的 通过env参数判断是开发模式还是build模式
"scripts": {
"start": "webpack-dev-server --env=development --progress --colors",
"build": "webpack --env=production --progress"
},2.2 webpack.config.js 中 module.exports 增加 mode
由于我的是env参数，所以我的写法是
let config = {
mode: ENV,
entry: {
...
export default config;3 再见commonchunk，你好optimization
webpack3的写法：
plugins: [// new webpack.optimize.CommonsChunkPlugin({
// async: true,
// children: true,
// minChunks: 3
// }),
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor', 'manifest']
// }),webpack4的写法
let config = {
mode: ENV,
...
optimization: {
runtimeChunk: {
name: 'manifest'
},
// minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必须是数组，在production模式下使用到，见步骤4
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(less|scss|css)$/,
chunks: 'all', // merge all the css chunk to one file
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
...
};4 ExtractTextWebpackPlugin调整，建议选用新的CSS文件提取插件mini-css-extract-plugin
production模式，增加 minimizer
绿色注释掉的是原写法 红色是新写法
// import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import UglifyJsPlugin from "uglifyjs-webpack-plugin";
import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin";
let config = {
...
plugins: [
...// new ExtractTextWebpackPlugin({
// filename: '[name].[contenthash:8].css',
// allChunks: true
// }),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
}),
...
],
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
'css-loader',
{
loader: 'less-loader',
options: {
strictMath: true
}
}
]
// loader: ExtractTextWebpackPlugin.extract({
// use: [
// {
// loader: 'css-loader'
// },
// {
// loader: 'less-loader',
// options: {
// strictMath: true
// }
// }
// ]
// })
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
'css-loader'
]
// loader: ExtractTextWebpackPlugin.extract({
// use: ['css-loader']
// })
},
...
]
},
...
};
switch (ENV) {
case 'production':
config = merge(config, {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
]
},
plugins: [
new CleanWebpackPlugin([TARGET])
]
});
break;
...
}
export default config;5 安装包
npm i
根据package.json文件安装相关包
6 启动服务
npm run start
启动出现的错误
env介绍
https://segmentfault.com/p/1210000008466178
关注一下大佬的 评论区， 我个人还是不能很好理解这个按需加载
https://segmentfault.com/q/1010000013106040
辅助理解一下吧。。。
justjavac 2017年02月24日 发布于前端 www.2ality.com babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。 目前我们写 javascript 代码时，需要使用 N 个 preset，比如：babel-preset-es2015、babel-preset-es2016。es2015 可以把 ES6 代码编译为 ES5，es2016 可以把 ES2016 代码编译为 ES6。babel-preset-latest 可以编译 stage 4 进度的 ECMAScript 代码。 问题是我们几乎每个项目中都使用了非常多的 preset，包括不必要的。例如很多浏览器支持 ES6 的 generator，如果我们使用 babel-preset-es2015 的话，generator 函数就会被编译成 ES5 代码。 babel-preset-env 的工作方式类似 babel-preset-latest，唯一不同的就是 babel-preset-env 会根据配置的 env 只编译那些还不支持的特性。 使用这个插件，你讲再也不需要使用 es20xx presets 了。 配置语法和 Autoprefixer 一样......
.babelrc
// "presets": ["react", "es2015", "stage-0"], "presets": ["react", "env", "stage-0"],
安装 babel-preset-env 包
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "6.24.1", //这个应该不需要了
升级了mobx 3.3.1 为 5.5.1 报 mobx.useStrict(true); 错误 纠正
网上搜索的方案是 enforceActions: true
运行提示是：
Deprecated: Deprecated value for 'enforceActions', use 'false' => '"never"', 'true' => '"observed"', '"strict"' => "'always'" instead
所以修改如下
// mobx.useStrict(true);
mobx.configure({
enforceActions: 'always',
});npm install -g npm-check-updates
ncu -u
package.json文件包的版本会自动升级到最新版本
