webpack进阶——理论篇

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和压缩代码。

1. js代码压缩及Tree Shaking：webpack-parallel-uglify-plugin webpack.optimization
2. css代码压缩及Tree Shaking：purifycss-webpack purify-css optimize-css-assets-webpack-plugin
3. 抽取常用第三方包：webpack/lib/DllPlugin webpack/lib/DllReferencePlugin

深入理解webpack-dev-server文件系统

将文件写入内存，写入内存中文件为Buffer格式。。读取通过memory-fs暴露方法读取文件。读取内存文件和往内存中写入文件都在webpack-dev-middleware插件中暴露出方法，一般读取文件、写入文件方法在context.fs对象中，context对象操作内存文件方法，由另一个文件中setFs扩充。