<>强配置resolve.modules
Webpack的决心。模块配置模块库(即node_modules)所在的位置,在js里出现进口的vue这样不是相对,也不是绝对路径的写法时,会去node_modules目录下找。但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明node_modules的全路径;同样,对于别名(别名)的配置,亦当如此:
函数解决(dir) {
返回路径。加入(__dirname”. .“dir)
}
模块。出口={
解决:{
扩展:['。js ', '。vue ', ' . json),
模块:(
解决(“src”),
解决(“node_modules”)
),
别名:{
“vue美元”:“vue/dist/vue.common.js”,
“src”:解决(“src”),
“资产”:解决(src/资产),
“组件”:解决(src/组件),//?
“存储”:解决(src/存储)
}
}，
…
}
之前
<强>合理设置测试,包括,排除
测试:必须满足的条件(正则表达式,不要加引号,匹配要处理的文件)
排除:不能满足的条件(排除不处理的目录)
包括:导入的文件将由加载程序转换的路径或文件数组(把要处理的目录包括进来)
这可以减少不必要的遍历,从而减少性能损失。
<强>替换代码压缩工具
Webpack默认提供的UglifyJS插件,由于采用单线程压缩,速度慢;
webpack-parallel-uglify-plugin插件可以并行运行UglifyJS插件,更加充分而合理的使用CPU资源,这可以大大减少的构建时间,
当然,该插件应用于生产环境而非开发环境,安装插件后,进行如下配置:
//删掉webpack提供的UglifyJS插件//新webpack.optimize.UglifyJsPlugin ({//压缩:{//警告:假的,//drop_console:没错//},//sourceMap:没错//}),//增加webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin=要求(“webpack-parallel-uglify-plugin”);
新ParallelUglifyPlugin ({
cacheDir:”。缓存/',//设置缓存路径,不改动的调用缓存,第二次及后面构建时提速
uglifyJS: {
输出:{
评论:假
}，
压缩:{
警告:假
}
}
})
也试了一下同类型插件webpack-uglify-parallel,但并没有webpack-parallel-uglify-plugin效果好(可能因项目而异,在大家项目中可以使用对比)。
webpack-parallel-uglify-plugin插件相对UglifyJsPlugin打出的包略大(但是不明显);这里的提速和增加的体积相比,我选择了追求速度(使用后我从40秒降到了19秒)。
<强>拷贝静态文件
使用copy-webpack-plugin插件:把指定文件夹下的文件复制到指定的目录;其配置如下:
var CopyWebpackPlugin=要求(“copy-webpack-plugin”)
插件:[
…//复制自定义静态资产
新CopyWebpackPlugin ([
{
来自:路径。解决(__dirname“. ./静态”),
:config.build.assetsSubDirectory,
忽略:[‘*’]。
}
])
]
DllPlugin,DllReferencePlugin
之前
Dll这个概念应该是借鉴了Windows系统的Dll。一个Dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的应用引用的。
打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个清单文件中,而引用dll的代码(dll用户)在打包的时候,只需要读取这个清单文件,就可以了。
var路径=要求(“路径”)
var webpack=要求(“webpack”)
模块。出口={
条目:{
供应商:[//这里填写需要的依赖库
“babel-polyfill”,
“axios”,
“vue/dist/vue.common.js”,
“vue-router”,
“pingpp-js”,
“region-picker”
]
}，
输出:{
路径:路径。解决(__dirname“. ./静态/js”),
文件名:“[名字].dll.js”,
图书馆:“[名字]_library”
}，
模块:{
规则:[
{
测试:/\ .vue/美元,
装载机:“vue-loader”
}，
{
测试:/\ . js/美元,
装载机:“babel-loader”,
排除:/node_modules/}
]
}，
插件:[
新webpack.optimize.ModuleConcatenationPlugin (),
新webpack.DllPlugin ({
路径:路径。加入(__dirname”。”、“[名字]-manifest.json”),
libraryTarget:“commonjs2”,
名称:“[名字]_library”
}),
新webpack.optimize.UglifyJsPlugin ({
压缩:{
警告:假
}
})
]
}
