Webpack 打包 - 8. 提取 css 成单独文件

打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。

1.文件结构：

 

 

 

 

 

 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x)

$ npm i mini-css-extract-plugin@0.9.0 -D

3. a.css

#box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

 

b.css

#box2 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
}

 

index.css

import '../css/a.css';
import '../css/b.css';

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

 

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({
            // 对输出的css文件进行重命名
            filename: 'css/built.css'
        })
    ],
    mode: "development"
}

 

3.打包

$ webpack

生成 文件

 

 CSS文件被单独打包出来。

 

end~

 

posted @ 2022-09-08 11:31  Evengod  阅读(218)  评论(0)    收藏  举报