前面chapter11介绍了js的代码分割,本章说下css的代码分割如何弄。 git仓库:webpack-demo
CodeSplitting
的时候已经讲过代码分割的概念了,是个什么东西,但那是对js模块做代码分割,这节说下css的代码分割。$ cd chapter13
$ npm install mini-css-extract-plugin --save-dev
webpack
中,不像前面12章设置CodeSplitting
那样加个optimization
属性搞一下就好了,这里我们要走如何使用一个插件的流程。webpack.config.js
中: require("mini-css-extract-plugin")
引入这个插件;plugins
中使用它;style-loader
都替换为这个插件提供的MiniCssExtractPlugin.loader
。(我这里示例只是替换了处理css的,其他less和sass的处理loader一样也要替换,具体看git仓库源码吧)// ...
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// ...
module: {
rules: [
// 处理css
{
test: /\.css$/,
use: [
- "style-loader",
+ MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
},
]
},
plugins: [
// 打包前删除掉dist文件避免文件冗余重复
new CleanWebpackPlugin(),
// 可以为你生成一个HTML文件
new HtmlWebpackPlugin({
title: "webpack从0到1",
template: "./index.html"
}),
// css文件的代码分割
+ new MiniCssExtractPlugin()
]
};
npm run build
走一波。dist
目录有点乱了,我们在回顾并说明介绍一下各个文件吧。
.map
文件就不多说了,sourcemap
的映射。0.bundle.js
文件,是webpack从0到1-Prefetching/Preloading章的产物,在示例中因为我们使用import()
方法动态的加载了footer.js
模块,所以webpack对其进行了代码分割。vendors~main.bundle.js
文件,因为它也是webpack对其代码分割生成生的,是webpack从0到1-CodeSplitting代码分割章节的产物,里面是axios的js代码,为什么与0.bundle.js
没有合并到一起呢?因为axios
的引入是在node_modules
里面的,它们的引入方式对应两个不同的缓存组,所以分割为了两个文件。index.html
是HtmlWebpackPlugin
这个插件做的好事罗。main.bundle.js
就是webpack中定义的output
指定输出文件了。main.css
就是我们这章说的css代码分割的产物了。