转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name
webpack提取 CSS 成单独文件
提取css 成单独文件需要用到
mini-css-extract-plugin插件
一、提取 css 的核心配置
// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js
…………
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// webpack配置
………
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//这个loader取代style-loader。作用:提取js中的css成单独文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath
publicPath: '../'
},
},
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
……
]
},
// plugins的配置
plugins: [
……
new MiniCssExtractPlugin({
//对输出的css文件进行重命名
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
})
],
……
}
1.1、和原有配置差异
引入mini-css-extract-plugin插件
// 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
修改 loader 配置
// 原配置
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//创建style标签,将js中的样式资源插入进行,添加到head中生效
'style-loader',
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
]
},
//=============================
// 变更为
// loader的配置
module: {
rules: [
//打包 css 文件的详细loader配置
{
//匹配哪些文件
test: /\.css$/,
//使用哪些loader进行处理
use: [
// use数组中loader执行顺序:从右到左,从下到上依次执行
//这个loader取代style-loader。作用:提取js中的css成单独文件
{
loader: MiniCssExtractPlugin.loader,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath,
// 这里如果注释掉是因为未给css文件单独分配文件夹,无需进行路径调整
publicPath: '../'
},
},
//将css文件变成commonjs模块加载js中,里面内容是样式字符串
'css-loader'
]
},
……
]
},
使用 MiniCssExtractPlugin.loader 取代style-loader，作用是提取js中的css成单独文件。
添加plugins的配置
// 添加插件配置
// plugins的配置
plugins: [
……
new MiniCssExtractPlugin({
//对输出的css文件进行重命名，这里单独为生产的 css 创建一个 css 文件夹。
filename: './css/[name].css',
chunkFilename: "./css/[id].css",
ignoreOrder: false,
linkType: "text/css",
})
],
添加插件配置 可指定 文件名、和标签引入类型。
二、安装插件
# 安装 mini-css-extract-plugin 插件
> npm i mini-css-extract-plugin -D
三、运行
> webpack
结论
1、独立提取
css文件使用mini-css-extract-plugin插件。2、
publicPath: '../‘只在单独为 css文件分配文件夹时使用。3、记得要在
plugins: []配置mini-css-extract-plugin插件。