1介绍
之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js
的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack
,这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js
去完成webpack
的一些特殊配置,默认它会被@vue/cli-service
自动加载。
此刻,你需要创建vue.config.js
文件。
查看默认的webpack配置
VueCLI官方文档:vue-cli-service
暴露了inspect
命令用于审查解析好的webpack
配置。那个全局的vue可执行程序同样提供了inspect
命令,这个命令只是简单的把vue-cli-service``inspect
代理到了你的项目中。
被抽象化的webpack
,我们要想去理解它默认的一些配置的话是比较困难的,所以我们可以通过指令去查看。
该指令会将webpack
的配置输出到output.js
文件,这样方便去查看。
vueinspect>output.js复制代码复制代码vue.config.js文件
这个文件导出了一个包含了选项的对象:
module.exports={//选项...}复制代码复制代码接下来,详细介绍一些选项及配置:
2基本配置
module.exports={productionSourceMap:false,publicPath:'./',outputDir:'dist',assetsDir:'assets',devServer:{port:8090,host:'0.0.0.0',https:false,open:true},//其他配置...复制代码复制代码productionSourceMap:生产环境是否要生成sourceMap
publicPath:部署应用包时的基本URL,用法和webpack
本身的output.publicPath
一致
- 可以通过三元运算去配置
dev
和prod
环境,publicPath:process.env.NODE_ENV==='production'?'/prod/':'./'
outputDir:build
时输出的文件目录
assetsDir:放置静态文件夹目录
devServer:dev环境下,webpack-dev-server
相关配置
- port:开发运行时的端口
- host:开发运行时域名,设置成
'0.0.0.0'
,在同一个局域网下,如果你的项目在运行,同时可以通过你的http://ip:port/...访问你的项目
- https:是否启用
https
- open:
npmrunserve
时是否直接打开浏览器
3插件及规则的配置
在vue.config.js
如果要新增/修改
webpack
的plugins
或者rules
,有2种方式。
configureWebpack
方式
configureWebpack是相对比较简单的一种方式
- 它可以是一个
对象
:和webpack
本身配置方式是一致,该对象将会被webpack-merge
合并入最终的webpack
配置 - 它也可以是一个
函数
:直接在函数内部进行修改配置
configureWebpack:{rules:[],plugins:[]}configureWebpack:(config)=>{//例如,通过判断运行环境,设置modeconfig.mode='production'}复制代码复制代码chainWebpack
方式
chainWebpack链式操作(高级),接下来所有的配置我都会在该选项中进行配置
4规则rules的配置
关于rules
的配置,我会分别从新增/修改进行介绍。
4.1rules的新增
在webpack
中rules
是module
的配置项,而所有的配置的都是挂载到config
下的,所以新增一个rule方式:
config.module.rule(name).use(name).loader(loader).options(options)复制代码复制代码案例:style-resources-loader
来添加less
全局变量
案例:svg-sprite-loader
将svg图片以雪碧图的方式在项目中加载
module.exports={chainWebpack:(config)=>{//通过style-resources-loader来添加less全局变量consttypes=['vue-modules','vue','normal-modules','normal'];types.forEach(type=>{letrule=config.module.rule('less').oneOf(type)rule.use('style-resource').loader('style-resources-loader').options({patterns:[path.resolve(__dirname,'./lessVariates.less')]});});//`svg-sprite-loader`:将svg图片以雪碧图的方式在项目中加载config.module.rule('svg').test(/.svg$/)//匹配svg文件.include.add(resolve('src/svg'))//主要匹配src/svg.end().use('svg-sprite-loader').loader('svg-sprite-loader')//使用的loader,主要要npm该插件.options({symbolId:'svg-[name]'})//参数配置}}复制代码复制代码4.2rules的修改
针对已经存在的rule
,如果需要修改它的参数,可以使用tap
方法:
config.module.rule(name).use(name).tap(options=>newOptions)复制代码复制代码案例:修改url-loader
的参数
module.exports={chainWebpack:(config)=>{//`url-loader`是webpack默认已经配置的,现在我们来修改它的参数config.module.rule('images').use('url-loader').tap(options=>({name:'./assets/images/[name].[ext]',quality:85,limit:0,esModule:false,}))}}复制代码复制代码5插件plugins的配置
关于plugins
的配置,我会分别从新增/修改/删除
进行介绍。
5.1plugins的新增
- 注意:这里WebpackPlugin不需要通过
newWebpackPlugin()
使用。
config.plugin(name).use(WebpackPlugin,args)复制代码复制代码案例:新增hot-hash-webpack-plugin
constHotHashWebpackPlugin=require('hot-hash-webpack-plugin');module.exports={chainWebpack:(config)=>{//新增一个`hot-hash-webpack-plugin`//注意:这里use的时候不需要使用`newHotHashWebpackPlugin()`config.plugin('hotHash').use(HotHashWebpackPlugin,[{version:'1.0.0'}]);}}复制代码复制代码5.2plugins的修改
同理,plugin
参数的修改也是通过tap
去修改。
config.plugin(name).tap(args=>newArgs)复制代码复制代码案例:修改打包后css
抽离后的filename
及抽离所属目录
案例:删除console
和debugger
constHotHashWebpackPlugin=require('hot-hash-webpack-plugin');module.exports={chainWebpack:(config)=>{//修改打包时css抽离后的filename及抽离所属目录config.plugin('extract-css').tap(args=>[{filename:'css/[name].[contenthash:8].css',chunkFilename:'css/[name].[contenthash:8].css'}]);//正式环境下,删除console和debuggerconfig.optimization.minimize(true).minimizer('terser').tap(args=>{let{terserOptions}=args[0];terserOptions.compress.drop_console=true;terserOptions.compress.drop_debugger=true;returnargs});}}复制代码复制代码5.3plugins的删除
对于一些webpack
默认的plugin
,如果不需要可以进行删除
config.plugins.delete(name)复制代码复制代码案例:删除vue-cli3.X
模块的自动分割抽离
module.exports={chainWebpack:(config)=>{//vue-cli3.X会自动进行模块分割抽离,如果不需要进行分割,可以手动删除config.optimization.delete('splitChunks');}}复制代码复制代码6一些常见的配置
6.1修改enter文件
webpack
默认的entry
入口是scr/main.ts
config.entryPoints.clear();//清空默认入口config.entry('test').add(getPath('./test/main.ts'));//重新设置复制代码复制代码6.2DefinePlugin
定义全局全局变量,DefinePlugin
是webpack
已经默认配置的,我们可以对参数进行修改
config.plugin('define').tap(args=>[{...args,"window.isDefine":JSON.stringify(true),}]);复制代码复制代码6.3自定义filename及chunkFilename
自定义打包后js文件的路径及文件名字
config.output.filename('./js/[name].[chunkhash:8].js');config.output.chunkFilename('./js/[name].[chunkhash:8].js');复制代码复制代码6.4修改html-webpack-plugin参数
html-webpack-plugin
是webpack
已经默认配置的,默认的源模版文件是public/index.html
;我们可以对其参数进行修改
config.plugin('html').tap(options=>[{template:'../../index.html'//修改源模版文件title:'test',}]);复制代码复制代码6.5设置别名alias
webpack
默认是将src
的别名设置为@
,此外,我们可以进行添加
config.resolve.alias.set('@',resolve('src')).set('api',resolve('src/apis')).set('common',resolve('src/common'))复制代码复制代码7附上一份我的vue.config.js的配置
constpath=require('path');constHotHashWebpackPlugin=require('hot-hash-webpack-plugin');constWebpackBar=require('webpackbar');constresolve=(dir)=>path.join(__dirname,'.',dir);module.exports={productionSourceMap:false,publicPath:'./',outputDir:'dist',assetsDir:'assets',devServer:{port:9999,host:'0.0.0.0',https:false,open:true},chainWebpack:(config)=>{consttypes=['vue-modules','vue','normal-modules','normal'];types.forEach(type=>{letrule=config.module.rule('less').oneOf(type)rule.use('style-resource').loader('style-resources-loader').options({patterns:[path.resolve(__dirname,'./lessVariates.less')]});});config.resolve.alias.set('@',resolve('src')).set('api',resolve('src/apis')).set('common',resolve('src/common'))config.module.rule('images').use('url-loader').tap(options=>({name:'./assets/images/[name].[ext]',quality:85,limit:0,esModule:false,}));config.module.rule('svg').test(/.svg$/).include.add(resolve('src/svg')).end().use('svg-sprite-loader').loader('svg-sprite-loader');config.plugin('define').tap(args=>[{...args,"window.isDefine":JSON.stringify(true)}]);//生产环境配置if(process.env.NODE_ENV==='production'){config.output.filename('./js/[name].[chunkhash:8].js');config.output.chunkFilename('./js/[name].[chunkhash:8].js');config.plugin('extract-css').tap(args=>[{filename:'css/[name].[contenthash:8].css',chunkFilename:'css/[name].[contenthash:8].css'}]);config.plugin('hotHash').use(HotHashWebpackPlugin,[{version:'1.0.0'}]);config.plugin('webpackBar').use(WebpackBar);config.optimization.minimize(true).minimizer('terser').tap(args=>{let{terserOptions}=args[0];terserOptions.compress.drop_console=true;terserOptions.compress.drop_debugger=true;returnargs});config.optimization.splitChunks({cacheGroups:{common:{name:'common',chunks:'all',minSize:1,minChunks:2,priority:1},vendor:{name:'chunk-libs',chunks:'all',test:/[\/]node_modules[\/]/,priority:10}}});}}};