webpack基本配置
entry、output、loader、plugin。
webpack文件输出路径及引用路径
webpack打包文件:单独文件和公共模块文件。
chunkFilename
作用:指定chunk名,即指定通过webpack配置抽取的公共模块名。如若抽取的文件为js文件,模块输出的文件名则为chunkFilename值;而css文件,则为new MiniCssExtractPlugin(options)中options.chunkFilename
。chunkFilename中[name]
变量值:为webpack中配置抽取公共模块地方的name值,如optimization.splitChunks.cacheGroups中的name值
。filename中[name]
变量值:entry key
值。如提取css文件中filename,js文件的filename。file-loader或url-loader生成的单独文件中[name]
变量值:为原文件name,如test.png,打包成单独文件后name为test。
.js文件:
- 文件输出路径:
output.path output.filename/output.chunkFilename
- 文件引用路径:
output.publicPath output.filename/output.chunkFilename
.css文件:
- 文件输出路径:
output.path new MiniCssExtractPlugin(options)中options.filename/options.chunkFilename
- 文件引用路径:
new MiniCssExtractPlugin(options)中options.filename/options.chunkFilename
其他,如.png等:
- 文件输出路径:
output.path options.outputPath options.name
——loader中options - 文件引用路径:loader中options,
output.publicPath/options.publicPath options.outputPath options.name
。注意:options.publicPath权重高于output.publicPath,publicPath最好不用相对路径,不然会有不可预知错误。
webpack性能优化:
打包速度及打包输出文件体积优化:Tree Shaking和压缩代码。
- js代码压缩及Tree Shaking:
webpack-parallel-uglify-plugin webpack.optimization
- css代码压缩及Tree Shaking:
purifycss-webpack purify-css optimize-css-assets-webpack-plugin
- 抽取常用第三方包:
webpack/lib/DllPlugin webpack/lib/DllReferencePlugin
深入理解webpack-dev-server文件系统
将文件写入内存,写入内存中文件为Buffer格式。。读取通过memory-fs暴露方法读取文件。读取内存文件和往内存中写入文件都在webpack-dev-middleware插件中暴露出方法,一般读取文件、写入文件方法在context.fs对象中,context对象操作内存文件方法,由另一个文件中setFs扩充。