自动化构建工具——7.webpack生产环境搭建（提取CSS成单独文件）
程序员文章站
2022-06-15 12:01:41
...
生产环境搭建——提取CSS成单独文件
一、目录结构
- a.css
#box1 {
width: 100px;
height: 100px;
background-color: pink;
}
- b.css
#box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
- index.js
import '../css/a.css'
import '../css/b.css'
- index.html
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
二、下载插件
输入指令（根目录）：
npm i mini-css-extract-plugin -D
三、修改配置文件
- webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry:'.src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style标签，将样式放入
// 'style-loader',
// 这个loader取代style-loader，作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件整合到js文件中
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的文件进行重命名
filename: 'css/built.css'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}
}
四、运行webpack/npx webpack-dev-server
- 运行webpack指令后
- 目录结构：
- 运行./build/index.html