Analyser les problèmes rencontrés lors de la mise à niveau de webpack3 vers la version webpack4 (résumé)

Dans l'article précédent "Le problème des caractères chinois tronqués dans VIM que vous méritez de connaître (partager)", nous avons découvert le problème des caractères chinois tronqués dans VIM. L'article suivant vous informera des problèmes rencontrés lors de la mise à niveau de webpack3 vers la version webpack4.

On dit que webpack3 se compile près de 60 à 80 % plus rapidement que 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

Après la mise à niveau réussie, notons que les projets sont principalement vue ^2.5.9, webpack ^4.10.2, webpack-dev-sever ^3.1 .4, et la mise à niveau est également accompagnée de vue-loader ^15

Une fois le projet recompilé, il est réduit de 1,7 Mo d'origine à 1,1 Mo , il semble que la compression soit également affectée par l'effet.

Les points suivants doivent être modifiés :

vue-loader14 à 15 il faut ajouter la configuration suivante

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 >Les modifications suivantes doivent être apportées après la mise à niveau🎜rrreee🎜<code>webpack3 Modifications de configuration qui doivent être apportées après la mise à niveau 4🎜rrreee🎜Autres messages d'erreur divers, faites attention, il se peut que la version du module soit trop élevée. Elle est basse, tout ira bien si vous le mettez à niveau. 🎜🎜【Fin】🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo d'introduction au pack Web🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!