Webpack CSS配置

一、基础安装

npm install --save-dev webpack webpack-cli css-loader style-loader

二、配置示例

1. 基础 CSS 处理

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配.css结尾的文件
        use: [
          'style-loader', // 将CSS注入到页面<style>标签
          'css-loader'    // 解析CSS文件中的@import和url()
        ]
      }
    ]
  }
}

2. 添加 Less 支持

npm install --save-dev less less-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // ...CSS规则同上
      {
        test: /\.less$/, // 匹配.less结尾的文件
        use: [
          'style-loader',
          'css-loader',
          'less-loader' // 将Less编译为CSS
        ]
      }
    ]
  }
}

3. 添加 PostCSS 自动前缀

npm install --save-dev postcss-loader autoprefixer

创建 postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')() // 自动添加浏览器前缀
  ]
}

更新 Webpack 配置：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader' // 添加自动前缀处理
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  }
}

三、关键概念解释

1. Loader 作用说明

Loader	功能描述
style-loader	将CSS字符串插入到DOM的<style>标签中
css-loader	解析CSS文件中的@import和url()，处理CSS模块化
less-loader	将Less语法编译为普通CSS
postcss-loader	使用PostCSS处理CSS，常用插件如autoprefixer自动添加浏览器前缀

2. 开发 vs 生产环境

开发环境推荐配置：

use: ['style-loader', 'css-loader', 'postcss-loader']

• 使用style-loader实现快速热更新
• 保留可读的类名便于调试

生产环境推荐配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 替换style-loader
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']

// 添加插件
plugins: [new MiniCssExtractPlugin()]

• 使用MiniCssExtractPlugin提取CSS为单独文件
• 启用CSS压缩等优化

四、完整最小配置示例

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
}

五、使用示例

1. 创建CSS文件 src/style.css:

body {
  background: #f0f0f0;
  display: flex;
}

2. 创建Less文件 src/theme.less:

@color: red;

.title {
  color: @color;
  transform: rotate(0deg); /* 测试autoprefixer */
}

3. 在JS中引入样式 src/index.js:

import './style.css'
import './theme.less'

document.body.innerHTML = '<h1 class="title">Hello Webpack!</h1>'

4. 运行开发服务器：

npx webpack serve --open