一 背景

最近在做一个项目，项目本身是用vue-cli创建的单页面应用，由于项目扩展需要创建多页面，所以需要对不同的html分别进行css文件打包。于是开始研究extract-text-webpack-plugin插件。

二 插件介绍

打包样式有两种方法，一种是使用style-loader自动将css代码放到生成的style标签中，并且插入到head标签里。另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。

三 插件使用

1 插件安装：

# for webpack 3 npm install --save-dev extract-text-webpack-plugin# for webpack 2 npm install --save-dev extract-text-webpack-plugin@2.1.2# for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1

2 插件使用

在webpack.config.js中引入

const ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", // 编译后用什么loader来提取css文件 use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ]}

多实例

在实例上也有个 extract function。如果你有1个以上的 ExtractTextPlugin 的实例，你应该使用实例上的 extract。

const ExtractTextPlugin = require('extract-text-webpack-plugin');// Create multiple instancesconst extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');module.exports = { module: { rules: [ { test: /\.css$/, use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) }, { test: /\.less$/i, use: extractLESS.extract([ 'css-loader', 'less-loader' ]) }, ] }, plugins: [ extractCSS, extractLESS ]};

抽取 Less 或者 Sass

配置是相同的, 根据需求使用 sass-loader 取代 less-loader。

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('style.css') //if you want to pass in options, you can do so: //new ExtractTextPlugin({ // filename: 'style.css' //}) ]}

url() Resolving

如果你运行 webpack 发现 urls resolve 不对。你可以使用 options 扩展 loader 功能。 url: false 使得你的路径 resolve 的时候不会发生任何变化。

const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { // If you are having trouble with urls not resolving add this setting. // See https://github.com/webpack-contrib/css-loader#url url: false, minimize: true, sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } } ] }) } ] }}

改变文件名

filename 参数可以是 Function。通过传入 getPath 去处理像 css/[name].css 的格式，返回一个真正的文件名， css/js/a.css。你可以替换 css/js 为 css，这样你可以得到一个新的路径 css/a.css。

entry: { 'js/a': "./a"},plugins: [ new ExtractTextPlugin({ filename: (getPath) => { return getPath('css/[name].css').replace('css/js', 'css'); }, allChunks: true })]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。