webpack loader配置篇

module: {
   rules: [
  　　{
        test: /\.css/,//匹配以CSS结尾的文件
        use: [‘style-loader‘,‘css-loader‘],//执行过程是从右至左，这两个顺序不能调换
　　　　　　先使用css-loader打包到js里，在使用style-loader插入到html里面；
　　　　　　如果只有一个loader，不需要使用use;可以直接写成以下方式
　　　　　loader:‘css-loader‘
      },
      {
　　　　test: /\.js/,
        use: 
　　　　　　loader: ‘‘,
　　　　　　options: { 
　　　　　　　　// 这里可以指定一个 publicPath 
　　　　　　　　// 默认使用 webpackOptions.output中的publicPath 
　　　　　　　　publicPath: ‘../‘ 
　　　　　　},
　　　　　},
      }
    ]
}

const  MiniCssExtractPlugin= require(‘mini-css-extract-plugin‘)
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);
module: {
   rules: [
  　　{
        test: /\.css/,
        use: [miniCssExtractPlugin.loader,‘css-loader‘],
      },
      {
　　　　test: /\.less/,
        use: [miniCssExtractPlugin.loader,‘css-loader‘,‘less-loader‘],
      }
    ]
},
plugins:{
  new MiniCssExtractPlugin({
　　　　filename:　‘‘//可以不写，写了以后打包出来的文件名就是这里定义的文件名
　　})
　new OptimizeCSSAssetsPlugin()
}