Analisis masalah yang dihadapi semasa menaik taraf webpack3 kepada versi webpack4 (ringkasan)

Dalam artikel sebelum ini "Masalah aksara Cina yang kacau dalam VIM yang patut anda ketahui (kongsi) ", kami mengetahui tentang masalah aksara Cina yang kacau dalam VIM. Artikel berikut akan memberitahu anda tentang masalah yang dihadapi semasa menaik taraf webpack3 kepada versi webpack4 Mari kita lihat.

Dikatakan bahawa webpack3 menyusun hampir 60%-80% lebih cepat daripada webpack4.

Selepas peningkatan yang berjaya, mari kita merekodkannya terutamanya vue ^2.5.9, webpack ^4.10.2, dan webpack-dev-sever ^3.1.4 Bersempena dengan peningkatan, projek vue-loader ^15

ialah diterbitkan semula dan disusun oleh 1.7MB asal telah dikurangkan kepada 1.1MB Nampaknya pemampatan juga dipengaruhi oleh kesannya.

Perkara berikut perlu diubah suai:

vue-loader14untuk 15perlu menambah konfigurasi berikut

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-serverPerubahan berikut perlu dibuat selepas naik taraf

devServer: {
     ++ contentBase: path.resolve(__dirname, '../dos-html'),  // 需要指定路径 ++
        port: 7001,
        hot: true,
        // open: false,
        inline: true,
        compress: true,
        historyApiFallback: true,
       ....
    },

webpack3Tatarajah yang perlu diubah selepas menaik taraf 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
        }
      })
    ]
  },
...
}

Mesej ralat lain, sila ambil perhatian, mungkin versi modul adalah terlalu rendah.

【Tamat】

Pembelajaran yang disyorkan: Tutorial video pengenalan pek web

Atas ialah kandungan terperinci Analisis masalah yang dihadapi semasa menaik taraf webpack3 kepada versi webpack4 (ringkasan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!