Vue项目中使用webpack4遇到的一些的问题

刚使用webpack4来构建Vue2的项目环境就遇到了一些内置插件失效和环境依赖库的更新的坑。

webpack4中环境及依赖库的部分版本要求

loader 最低版本要求 功能说明
vue-loader 15.0.0 解析、编译vue单文件组件中的样式,需要配合vue-loader/lib/plugin插件使用,并内置css编译器
vue-style-loader 4.1.0 解析、编译vue单文件组件中的样式
babel-loader 7.1.3 对最新的ES语法进行转换
file-loader 1.1.10 批量修改文件路径、或者指定编译后文件储存路径
eslint-loader 2.0.0 代码检查

可能会有遗漏!!

webpack 4.X 相对与webpack 3.X的重大变更,不再支持部分插件,如js压缩,chunk分离及文件分离的一些插件。

失效的插件 类型 功能说明
webpack.optimize.CommonsChunkPlugin 内置插件 分离chunk。将多次出现的代码统一打包到一个文件中,Vue工程中用来打包vendor及manifest
webpack.optimize.UglifyJsPlugin 内置插件 压缩JS
extract-text-webpack-plugin loader 分离文件。将部分代码或文件提出到单独文件中。Vue工程中常用来分离css并合并到一个指定文件中

使用 mini-css-extract-plugin 代替

webpack4.X之前的版本常用extract-text-webpack-plugin插件来分离合并css到指定文件中,在webpack4中也提供了@next版本,但这里我并不使用,选择推荐的新的替代插件mini-css-extract-plugin来替代旧插件。
新插件与旧插件都需要在webpack的loader部分和plugin部分都进行配置,不同的是新插件提供了单独的loader,配置如下:

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ] 
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: 'css/[name].[contenthash].css'
        })
    ]
}

拆分 js 代码

这是webpack配置中很重要的一个环节,如果不对js代码进行拆分,公共库与入口代码将合并在一个js文件中,影响到浏览器缓存的合理性,页面资源的加载速度。所以,对js进行合理拆分,可以有效减小我们每次更新代码影响到的文件范围,保证了长缓存。

使用webpack3时,我们一般会提出manifest.js(webpack运行时,即webpack解析其他bundle代码时)、vendor.js(node_modules内的库)、main.js(项目业务代码)。在webpack3中使用webpack.optimize.CommonsChunkPlugin插件进行提取。在webpack4中被完全废除了,官方推荐使用optimization配置项进行配置,当然,css拆分也可以使用optimization来配置项。

在optimization中有一个非常重要的一个插件spliltChunkPlugin,刚使用webpack4,我在splitChunk的使用还在摸索阶段,我也查看了很多别人的配置,有很多的疑问,自己记录一些用法,如果大家有更好的建议,欢迎评论区说出来。

先来过一遍参数

optimization:{
    splitChunks:{
        chunks:async,//表示显示块的范围,三个可选值:
        //initial(初始块)、async(按需加载块)、all(默认,全部块)

        minSize:0,//表示在分离前的最小模块大小,默认为0,最小为30000

        minChunks:1,//表示分离前被引用次数,默认为1

        maxAsyncRequests:1,//最大按需加载次数,最大异步加载次数,默认1

        maxInitialRequests:1,//最大初始化加载次数,一个入口文件可以并行加载的最大文件数量,默认1

        automaticNameDelimiter: '~',//打包分隔符,若改为'-'则分离后的js默认命名规则为[来源]-[入口key].js

        name: function(){},//打包后的名称,此选项可接受函数,默认true,,由chunk和hash值自动生成,
        //当存在匹配的缓存组时,命名使用缓存组中的name值,若不在则为[来源]~[入口key].js

        cacheGroups:{//设置缓存chunks

            priority: 0,//缓存组优先级
            //当需要优先匹配缓存组的规则时,priority需要设置为正数,当需要优先匹配默认设置时,缓存组需设置为负数,0为两者分割线

            default:{//设置缓存组默认配置,可通过default:false禁用默认缓存组,
            //然后就可以自定义缓存组,将初始化加载时被重复引用的模块进行拆分
                minChunks:2,//引用两次
                priority:-20,//缓存组优先级为-20
                reuseExistingChunk:true,//表示可以使用已经存在的块,即如果满足条件的块已经存在就是用己有的的,不再创建一个新的块
            },
            [key]:{//自定义缓存组,可以根据需求,自由创建
                chunks:'initial',
                test: /vue/,//正则规则验证,如符合就提取chunk放入当前缓存组,值可以是function、boolean、string、RegExp,默认为空
                enforce: true//优先处理
            }
        }
    }
}

splitChunks是webpack主模块的一个细分模块,功能上,splitChunksPlugins只能用于如何抽离公用代码,制定抽离公用代码与入口文件的规则,除了这功能外,splitChunksPlugins 再无其他功能

下面是一个抽离公用代码与业务代码的一个可复用配置:

optimization:{
    splitChunks:{
        //对entry进行拆分
        chunks: 'all',
        minSize: 30000,
        cacheGroups:{
//比如你要单独把vue等官方库文件打包到一起,可以使用这个缓存组,如果要具体到库文件,可以单独给库文件写一个缓存组
            vendor:{
                test: /node_modules/,
                priority: 10,
                name: "vendor",
                enforce: true
            },
//这里定义分离前被引用过两次的文件,将其一同打包到common.js,最小为30kb
            common:{
                name: "common",
                minChunks: 2,
                minSize: 20000
            }
        }
    }
}

关于更多配置方法,一步步的了解webpack4的splitChunksPlugin插件 里有详细介绍。

另外还有一个可配套使用的runtimeChunk插件,webpack会添加一个只包含运行时的额外代码块到每一个入口。(看场景使用,它会导致每个入口都加载多一份代码)

压缩js

webpack4的uglifyJsPlugin实际上在不设置任何环境变量的情况下,始终会有压缩代码的行为,导致编译耗时,解决方法就是配置不同的环境变量在开发环境的不要使用uglifyJsPlugin插件,webpack4于是提供了mode这个新增的选项,且默认值为production,在package.json文件中设置–mode=production模式则自动开启。

参阅资料

  1. webpack4新变化
  2. webpack4新特性
  3. webpack4升级完全指南
  4. webpack4升级完全指北
  5. webpack细节

你可能感兴趣的:(webpack4+vue)