主要用到了extract-text-webpack-plugin插件,这是第三方插件,需要单独安装
npm install extract-text-webpack-plugin --save-dev
然后,先在顶部加载:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
plugins中启用该插件:
plugins: [
...
new ExtractTextPlugin("style.min.css"), // 独立 css 插件
]
在文件loader中,添加:
module: {
rules: [
...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
}
至此,已经可以实现将css单独打包了,另外还要
注意:暂时不要打开热更新,因为热更新时,生成的静态文件全部放在‘’缓存‘’中的,你会看不到最终效果;
参考文章:https://github.com/webpack-contrib/extract-text-webpack-plugin