Analysieren Sie die beim Upgrade von Webpack3 auf die Webpack4-Version aufgetretenen Probleme (Zusammenfassung).

Im vorherigen Artikel „Das Problem der verstümmelten chinesischen Schriftzeichen in VIM, das Sie kennen (teilen) sollten“) haben wir etwas über das Problem der verstümmelten chinesischen Schriftzeichen in VIM erfahren. Der folgende Artikel informiert Sie über die Probleme, die beim Upgrade von Webpack3 auf die Webpack4-Version auftreten.

Es heißt, dass webpack3 fast 60–80 % schneller kompiliert als webpack4. 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-loader14到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,
       ....
    },

webpack3升级4

Nach dem erfolgreichen Upgrade stellen wir fest, dass es sich bei den Projekten hauptsächlich um vue ^2.5.9, webpack ^4.10.2, webpack-dev-sever ^3.1 handelt .4, und das Upgrade wird auch von vue-loader ^15 begleitet.

Nachdem das Projekt neu kompiliert wurde, wird es von ursprünglich 1,7 MB auf reduziert 1,1 MB , es scheint, dass auch die Komprimierung von dem Effekt betroffen ist.

Die folgenden Punkte müssen geändert werden:

vue-loader14 bis 15 müssen die folgende Konfiguration hinzufügen

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
        }
      })
    ]
  },
...
}

webpack-dev-server Code >Die folgenden Änderungen müssen nach dem Upgrade vorgenommen werden🎜rrreee🎜<code>webpack3 Konfigurationsänderungen, die nach dem Upgrade vorgenommen werden müssen 4🎜rrreee🎜Andere verschiedene Fehlermeldungen, aufgepasst, Es kann sein, dass die Modulversion zu hoch ist. Es ist niedrig, aktualisieren Sie es einfach und es wird in Ordnung sein. 🎜🎜【Ende】🎜🎜Empfohlenes Lernen: 🎜Web-Pack-Einführungsvideo-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die beim Upgrade von Webpack3 auf die Webpack4-Version aufgetretenen Probleme (Zusammenfassung).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!