• 技术文章 >web前端 >js教程

    解析webpack3升级到webpack4版本遇到的问题(总结)

    奋力向前奋力向前2021-08-30 10:20:22转载145

    之前的文章《你值得了解的VIM中文乱码的问题(分享)》中,给大家了解了VIM中文乱码的问题。下面本篇文章给大家了解webpack3升级到webpack4版本遇到的问题,伙伴们来看看吧。

    据说webpack3webpack4编译速度将近快了 60%-80%。

    成功升级之后,于是来记录下,项目主要是vue ^2.5.9webpack ^4.10.2webpack-dev-sever ^3.1.4,配合升级的还有vue-loader ^15

    项目重现编译之后由原来的1.7MB减少到1.1MB,看来在压缩这块也是由效果的。

    需要修改的地方有以下几点:

    vue-loader1415需要增加如下配置

    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之后需要改动的配置

    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了。

    【完】

    推荐学习:Web pack入门视频教程

    以上就是解析webpack3升级到webpack4版本遇到的问题(总结)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:禅境花园,如有侵犯,请联系admin@php.cn删除
    专题推荐:js web webpack
    上一篇:深入了解Node.js中的4种 stream 下一篇:JS数组学习之返回满足给定条件的首个元素
    线上培训班

    相关文章推荐

    • webpack打包原理是什么• vue+webpack2实现路由懒加载的方法介绍• webpack的打包原理是什么• Laravel怎么自定义webpack.mix.js• Angular10如何配置webpack打包?方法介绍• 详解3种webpack中常用的JS压缩插件

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网