本文详解 extract-text-webpack-plugin 在 Webpack 中的配置方法，涵盖从基础引入到多实例管理、Less/Sass 编译支持及文件名自定义等核心功能。通过具体代码示例，展示如何在多页面 Vue 项目中独立打包 CSS 文件，解决样式分离与路径解析问题，适用于需要精细控制前端构建流程的开发场景。
extract-text-webpack-plugin 插件配置与多页面应用实践
一 背景
背景与插件介绍
近期开发的一个项目基于 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"),
]
}
多实例管理与 Less/Sass 支持
多实例
在实例上也有个 extract function。如果你有1个以上的 ExtractTextPlugin 的实例，你应该使用实例上的 extract。
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances
const 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
配置方式与 CSS 相同，只需根据实际需求将 less-loader 替换为 sass-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 解析与文件名自定义
url() Resolving
若运行 webpack 时发现 url 路径解析不正确，可通过 options 扩展 loader 功能。设置 url: false 可使路径在解析时保持不变，避免路径错误。
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
})
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。