vue webpack3 升級webpack4
阿新 • • 發佈:2019-03-02
drop res min line require 模式 lin plugin htm
據說webpack3 比webpack4 編譯速度將近快了60%-80%,
成功升級之後,於是來記錄下,項目主要是vue ^2.5.9 , webpack ^4.10.2 , webpack-dev-sever ^3.1.4 ,配合升級的還有vue-loader ^15
項目重現編譯之後由原來的1.7MB 減少到1.1MB ,看來在壓縮這塊也是由效果的。
需要修改的地方有以下幾點:
vue-loader 14 到15 需要增加如下配置
const VueLoaderPlugin = require('vue-loader/lib/plugin') ++++ const MiniCssExtractPlugin = require('mini-css-extract-plugin') // webpack 4 +++ const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3 ----- module.exports = { ... plugins: [ + new VueLoaderPlugin(), ++++ + new MiniCssExtractPlugin({filename:'mian.css'}) //for webpack 4 +++ - new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 --- ] ... }
webpack-dev-server 升級之後需做如下改動
devServer: {
++ contentBase: path.resolve(__dirname, '../dos-html'), // 需要指定路徑 ++
port: 7001,
hot: true,
// open: false,
inline: true,
compress: true,
historyApiFallback: true,
....
},
webpack 3 升級 4 之後需要改動的配置
plugins: [ //已經移除 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { // any required modules inside node_modules are extracted to vendor return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules')) === 0 ) } }), new webpack.optimize.UglifyJsPlugin(...)//已經移除 } ===> 修改為以下 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); moudel.exports = { mode: 'production', ++ 這裏指定模式。 ... optimization: { splitChunks: { name(module) { return ( module.resource && /\.js$/.test(module.resource) && module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0 ) } }, minimize: true, minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, // drop_debugger: true, // drop_console: true }, sourceMap: false } }) ] }, ... }
其他的各種報錯信息,註意看,可能是模塊版本太低了吧,都升級下就OK了。
[完]
vue webpack3 升級webpack4