webpack.config.js

webpack的配置文件
作用：指示webpack干哪些活(当你运行webpack指令时，会加载里面的配置)

下载处理css文件

npm i css css-loader -D
npm i css css-loader less less-loader -D //处理less所需要的包

const {resolve} = require('path') //引入resolve方法，写绝对路径
module.exports = {
      //输出文件名
    entry: './src/index.js',
      //输出路径
      //__dirname nodejs的变量，代表当前文件的目录绝对路径
    output: {
        filename: 'bulit.js',
        path: resolve(__dirname,'build')
    },
      //loader的配置
    module: {
          //!!!use数组中loader执行顺序：从右到左，从下到上，依次执行(所以是less-css-style的顺序)
        rules: [
            {
                  //匹配哪些文件 css文件的处理方法
                test: /\.css$/,
                  //使用哪些loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },{
                  //less文件的处理方法
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                              //将less文件编译为css文件
                              'less-loader'
                ]
            }
        ]
    },
    plugins: [
    ],
    mode: 'development',
    // mode: 'production'
}