webpack配置css和less的打包环境

安装相应的loader

npm i css-loader style-loader less-loader -S

var path = require('path');
config = {
  entry: "./test/main.js",
  output: {
    path: path.resolve(__dirname,"dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.(css$|less$)/,
        use: ["style-loader","css-loader","less-loader"]
      }
    ]
  },
  mode: "development"
}

module.exports = config;

说明：test是正则表达式的写法，表示匹配.css或者.less结尾的文件，use中的loader执行顺序从右到左，style-loader会生成style标签对打包的cs代码进行解释，所以这三个缺一不可，并且顺序不能变。