webpack打包样式资源分两步走

一: 安装 style-loader css-loader less-loader

npm i style-loader css-loader less-loader  -D

二: 在webconfig中做如下配置:
const { resolve } = require('path');

module.exports = {
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量,代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: [
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          'less-loader'
        ]
      }
    ]
  },
  // 模式
  mode: 'development', // 开发模式
}
注意:
  • 1 use数组中loader执行顺序:从右到左,从下到上 依次执行
  • 2 style-loader:创建style标签,将js中的样式资源插入进行,添加到head中生效
  • 3 css-loader:将css文件变成commonjs模块加载js中,里面内容是样式字符串
  • 4 less-loader:将less文件编译成css文件

带你入门前端
38 声望2 粉丝

通俗易懂,言简意赅授课