Webpack 4.x 有哪些改变
1、webpack不再支持node v4，这是因为新的webpack和附属插件使用了es6的语法，v4版本对es6不是很到位，所以，就不伺候了。
2、开始采取约定优于配置的思路，webpack@4.x里把很多选项都设置了默认值，比如入口就是./src，输出目录就是./dist，当然如果你自己去设置，它也不会拦着。所以在用webpack@4.x的时候，我们甚至都可以没有webpack.config.js这个配置文件也能一样打包。
3、拆分了旧版本里的webpack，分成了用来处理逻辑的webpack和提供可执行命令的webpack-cli，这也是有的同学把webpack装成新版本以后会报找不到webpack-cli模块这个错误的原因。
4、添加了mode选项，用来区分编译的环境，提供了development、production和none三个选项，理论上这个选项是强制指定的，其实不指定的话它也是有默认值的，但会给出一个warning，官方这么强烈建议了，就显式的指定一下吧。指定方式有两种，一是在启动命令里：
webpack --mode production
var config = {
mode: 'production' // 可选development、production和none
}
5、配置上的变动，类似删除了commonChunksPlugin，用optimization来代替这种。还有loader的用法也和1.15.0不一样了，配置文件里modoule下面loaders换成了rules,style-loader等不允许缩写成style
6、性能优化，提高了打包性能。另外从webpack2起，引入了Tree-shaking机制来提出没有被引用的模块。它的原理是按着引用关系重新建立一个新的依赖树，而没有被引用的模块就不会被打包到最后的代码里。之前的压缩优化方式是先把所有模块都挂到树上，然后通过分析后，删掉没被引用的模块。从字面意思来看，我觉得原来的方式更像在摇树，把没用的摇下来。这两种方式最后压缩完的结果可能类似，但设计思路完全是从两个方向走的。
7、其他。以上这些就是一些比较主要的变化，更详细的升级文档可以参考下官方的说明：
依赖插件的改变
1.webpack.optimize.UglifyJsPlugin(）方法被移除，解决方法有两种
- --mode production 表示生产环境,只要配置在package.json的script里面 js自动就压缩了
- 使用new UglifyJsPlugin()代替，下载“uglifyjs-webpack-plugin”包。
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
.......
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,//消除打包后的警告
drop_console: true,//console
pure_funcs: ['console.log']//消除打包后的console语句
}
},
sourceMap: config.build.productionSourceMap,
parallel: true }),
]
2.new ExtractTextPlugin('[name].[chunkhash:8].css')语句报错，
错误为：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
解决方法为：运行
npm install --save-dev extract-text-webpack-plugin@next，下载最新版本。extract-text-webpack-plugin这个插件只有最新的beta版本才支持webpack@4.x
3.new webpack.optimize.CommonsChunkPlugin()语句报错，
错误为：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
解决方法为：
optimization: {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},
plugins: []
贴上我自己的配置文件代码
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
app: path.resolve(__dirname, 'src/index.jsx'),
// 将 第三方依赖 单独打包
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'redux',
'es6-promise',
'whatwg-fetch',
'immutable'
]
},
output: {
path: path.resolve(__dirname,'build'),
filename: "[name].[chunkhash:8].js",
publicPath: '/'
},
resolve:{
extensions:['*', '.js','.jsx']
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015',"stage-1"],
cacheDirectory: true,
plugins: [["import", { "libraryName": "antd", "libraryDirectory": "es","style": "css" }]],
}
},
},
{ test: /\.less$/, exclude: /node_modules/, use: ExtractTextPlugin.extract('style-loader', 'css-loader','postcss-loader','less-loader') },// 单独打包出CSS，这里配置注意下
{ test: /\.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: [ 'css-loader',
'postcss-loader',]}) },
{ test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?name=images/[name].[chunkhash:8].[ext]' },
{ test:/\.(woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?name=fonts/[name].[chunkhash:8].[ext]'}
]
},
optimization: {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},
plugins: [
// webpack 内置的 banner-plugin
//new webpack.BannerPlugin("Copyright by wangfupeng1988@github.com."),
// html 模板插件
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html'
}),
// 定义为生产环境，编译 React 时压缩到最小
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
// 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
//new webpack.optimize.OccurenceOrderPlugin(),
new UglifyJSPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,//console
pure_funcs: ['console.log']//移除console
}
},
// sourceMap: config.build.productionSourceMap,
parallel: true
}),
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// //supresses warnings, usually from module minification
// warnings: false
// }
// }),
// 分离CSS和JS文件
new ExtractTextPlugin('[name].[chunkhash:8].css'),
// 提供公共代码
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// filename: '[name].[chunkhash:8].js'
// }),
// 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})
]
}
参考文献：https://m.imooc.com/article/24738?from=singlemessage&isappinstalled=0
网友评论