webpack的extract-text-webpack-plugin插件
今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制,webpack本来只能能打包处理.js文件,但是通过强大的loader之后,可以打包处理各种类型的文件。比如:.css文件等。
表面上webpack通过loader可以打包各种文件了,已经完美了。但是在某些场景中也存在着问题的,比如我们的css的内容都被打包到bundle.js里面了。在生产环境中我们通常会利用浏览器的缓存来提高用户体验,用上了webpack的hash(正常js文件hash类型会使用chunkhash)。
那么问题来了:
我只要修改了js部分的代码,那么我的css模块也会被重新打包,被当成css模块也有内容修改。
或者只修改了css模块,js模块是没有变化的,但是他们都是在一个bundle中,所以都会被认为都有修改。
解决方案:
思路:将css模块和js模块分开打包,换句话说把css代码从js文件中抽离出来,单独出一个模块。
方法:extract-text-webpack-plugin插件
用法说明:
ExtractTextPlugin基本参数说明:
filename:生成文件的文件名,可以包含 [name], [id], [contenthash]
allChunks:当为false的时候,只会提取初始化的时候引入的css,当allChunks属性为true时,会把异步引入的css也提取出来。
ExtractTextPlugin.extract基本参数说明:
use:指需要什么样的loader去编译文件
fallback: 这里表示不提取的时候,使用什么样的配置来处理css
publicfile:用来覆盖项目路径,生成该css文件的文件路径
上代码:
在webpack的配置中添加如下代码
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //记得先install该模块
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' })
css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }),
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ //css的提取
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({ //css的提取
fallback: "style-loader",
use: ['sass-loader','postcss-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
allChunks: true
})
]
要点说明:
1、在loader中,对.vue文件也做css的抽离。让.vue组件中的所有的css也能正常抽离出来。
2、plugins中ExtractTextPlugin的allChunks要设置成true,然后配合上要点1,这样就可以顺利的将所有vue组件中的css都提取出来。
注意:在webpack4中,建议用mini-css-extract-plugin替代。更多mini-css-extract-plugin的使用方法请查看:https://www.npmjs.com/package/mini-css-extract-plugin
————————————————
版权声明:本文为CSDN博主「No Bug !」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41134409/article/details/88416356