webpack 3 to 4

webpack 3 to 4

项目老大需要把webpack版本从 3 升级到 4。写个博客，做个笔记。

修改webpack、webpack-cli、web-dev-server的版本。

"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",

// webpack 4 支持的插件
"uglifyjs-webpack-plugin": "^1.0.0",
"mini-css-extract-plugin": "^0.6.0",
"vue-loader": "^15.5.0",
"vue-style-loader": "^4.1.2",

将new webpack.optimize.UglifyJsPlugin插件改成uglifyjs-webpack-plugin

webpack 3 ：

plugins: [
	new webpack.optimize.UglifyJsPlugin({
		compress: {
			warnings: false
		 }
	})
]

to webpack 4:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
	...
	optimization: {
		minimizer: [
		   new UglifyJsPlugin({
               uglifyOptions: {
                   // 编译环境下
                   compress: {
                       warnings: false
                   }
               }
           })
		]
	}
}

修改json的打包方式

module.exports = {
	module: {
		rules: {
			{
				test:/\.json/i,
				type: 'javascript/auto', //webpack 4 对json需要指定类型
				loader: 'json-loader'
			}
		}
	}
}

extract-text-webpack-plugin 改成 mini-css-extract-plugin

webpack 4 中提取文件css样式不再使用extract-text-webpack-plugin,用mini-css-extract-plugin代替。
webpack 3 :

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exprots = {
	module: {
	 rules: {
	 	test: /\.less$/,
	 	use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
            use: 'less-loader'
        }),
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            })
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }
	 }
	},
	plugins: [
		 new ExtractTextPlugin('styles.css');
	]
}

webpack 4:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exprots = {
	module: {
		rules: [
			{
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader'
            ]
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        minimize: true
                    },
                },
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ]
        }
		]
	},
	plugins: [
		new MiniCssExtractPlugin('styles.css'),
	]
}

修改vue的打包方式

项目框架是vue，webpack4对vue处理不一样
webpack 3 :

module.exprot = {
	module: {
		rules: [
			{
	            test: /\.vue$/,
	            use: {
	                loader: 'vue-loader',
	                options: {
		                loaders: {
		                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
		                    scss: 'vue-style-loader!css-loader!sass-loader',
		                    stylus: 'vue-style-loader!css-loader!stylus-loader'
		                }
	                }
	            }
	        },
		]
	}
}

webpack 4:

/*webpack4 中对vue的插件*/
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exprot = {
	module: {
		rules: [
			{
	            test: /\.vue$/,
	            use: {
	                loader: 'vue-loader',
	                options: {
		                loaders: {
		                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
		                    scss: 'vue-style-loader!css-loader!sass-loader',
		                    stylus: 'vue-style-loader!css-loader!stylus-loader'
		                }
	                }
	            }
	        },
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
}