1.安装

  1. npm i css-loader style-loader -D

2.创建样式文件

E:\Code\learn\webpack\a03_css\src\index.css

  1. html, body {
  2.     margin: 0;
  3.     padding: 0;
  4. }

3.创建入口文件

E:\Code\learn\webpack\a03_css\src\index.js

  1. import './index.css'
  3. console.log("Hello Yiu!")

4.创建配置文件

E:\Code\learn\webpack\a03_css\webpack.config.js

  1. const { resolve } = require('path')
  3. module.exports = {
  4.   // 入口文件
  5.   entry: './src/index.js',
  6.   // 输出
  7.   output: {
  8.     // 输出文件名
  9.     filename: 'built.js',
  10.     // 输出文件夹
  11.     path: resolve(__dirname, 'build')
  12.   },
  13.   // loader配置
  14.   module: {
  15.     rules: [
  16.       // 详细loader配置
  17.       {
  18.         // 正则，表示匹配那些文件
  19.         test: /\.css$/,
  20.         // 使用那些loader处理，顺序下到上、右到左
  21.         use: [
  22.           // 创建style标签，将js中的样式加入，添加到header标签中
  23.           'style-loader',
  24.           // 将css转换成commonjs模块加载js中，里面内容是样式字符串
  25.           'css-loader',
  26.         ]
  27.       }
  28.     ]
  29.   },
  30.   // 插件
  31.   plugins: [
  32.     // 详细插件配置
  33.   ],
  34.   // 模式
  35.   mode: 'development',
  36.   // mode: 'production',
  37. }

5.打包

E:\Code\learn\webpack\a03_css> webpack
# 执行webpack命令

6.less打包

6.1.安装

npm i less less-loader -D

6.2.创建less文件

E:\Code\learn\webpack\a03_css\src\title.less

#title {
  color: seagreen;
}

6.3.修改入口文件

E:\Code\learn\webpack\a03_css\src\index.js

import './index.css'
import './title.less'

console.log("Hello Yiu!")

6.4.编辑配置文件

E:\Code\learn\webpack\a03_css\webpack.config.js

const { resolve } = require('path')

module.exports = {
  // ...
  module: {
    rules: [
          // ...
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  // ...
}