webpack生产环境配置-提取css为单独文件

墨蓝 2023-07-18 06:44 111阅读 0赞

提取css为单独文件  
1，创建文件  
![在这里插入图片描述][20200324231847852.png]  
2，下载插件

> npm install --save-dev mini-css-extract-plugin

3，修改配置文件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'
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
4，运行指令：webpack

其他：  
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>

index.js

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

a.css

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

b.css

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

[20200324231847852.png]: /images/20230528/33b07ef249044d8283d1a26214516e65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20230528/06d55fbae1544b4e99f7b9ec5a88ecd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/32222d0950344036b6a74c2b74aeabdd.png