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