今天要和大家分享的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