• 项目目录

    image.png

    • 配置loader（style-loader、css-loader、less-loader、less等）

    （~PS：没有package.json的话可以先npm init）

    • css： npm i style-loader css-loader -D
    • less： npm i style-loader css-loader less-loader less -D (项目包含less,需额外下载less-loader、less)
      • 配置文件 ```javascript const { resolve } = require(‘path’);

    module.exports = { entry: ‘./src/index.js’, output: { filename: ‘built.js’, // 输出文件名 // dirname nodejs的变量，代表当前文件的目录绝对路径 path: resolve(dirname, ‘build’) // 输出路径 }, // loader的配置 module: { rules: [ // 详细loader配置 // 不同文件必须配置不同loader处理 {

    1.     test: /\.css$/, // 匹配哪些文件
    2.     // 使用哪些loader进行处理
    3.     use: [
    4.       // use数组中loader执行顺序：从右到左，从下到上 依次执行
    5.       // 创建style标签，将js中的样式资源插入进行，添加到head中生效
    6.       'style-loader',
    7.       // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
    8.       'css-loader'
    9.     ]
    10.   },
    11.   {
    12.     test: /\.less$/,
    13.     use: [
    14.       'style-loader',
    15.       'css-loader',
    16.       // 将less文件编译成css文件
    17.       // 需要下载 less-loader和less
    18.       'less-loader'
    19.     ]
    20.   }
    21. ]

    }, // plugins的配置 plugins: [ // 详细plugins的配置 ], mode: ‘development’ } ```

    • 执行指令：webpack