webpack抽取css

webpack4之前的版本使用ExtractTextPlugin方法提取css,
安装cnpm install extract-text-webpack-plugin -D

webpack4和webpack4.x上使用ExtractTextPlugin的话,会报下面的错误
DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
如果非要在webpack4上使用ExtractTextPlugin,必须用对应的beta版本
npm install extract-text-webpack-plugin@next

const extractCSS = new ExtractTextPlugin('extractCSS/[name]-one.css');
const extractLESS = new ExtractTextPlugin('extractLESS/[name]-two.css');

module:{
  entry:{
    index:'./src/script/index.js'
  },
  output:{
    filename:'[name].js', 
    path:path.resolve(__dirname,'build') // 下面所有文件打包的相对目录
  },
  rules:[
    {
      // 将css抽离出来放到build/extractCSS文件夹下
      test: /\.css$/,
      use: extractCSS.extract([ 'css-loader', 'postcss-loader' ]) 
    },
    {
      // 将src/style文件夹下的less文件转成css,并且抽离出来放到build/extractLESS文件夹下
      test:/\.less$/,
      include: [path.resolve(__dirname, "src/style")], 
      use: extractLESS.extract([ 'css-loader', 'less-loader' ])
    },
  ],
  plugins: [
    extractCSS,
    extractLESS,
    ...
  ]
}

运行npm run webpack结果:


那么webpack4以及webpack4.x上要怎么抽离css呢?
这时候要使用MiniCssExtractPlugin:
安装cnpm i -D mini-css-extract-plugin
 

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack4.x以及之后使用该方法提取css

module:{
  entry:{
    index:'./src/script/index.js'
  },
  output:{
    filename:'[name].js', 
    path:path.resolve(__dirname,'build') // 下面所有文件打包的相对目录
  },
  rules:[
     {
        test: /\.less$/i,
        include: [ path.resolve(__dirname, "src/style")],
        use:[
          'style-loader',
          {loader:MiniCssExtractPlugin.loader,}, // 单独将src/style下的less文件提出类
          'css-loader',
          'less-loader'  // 注意顺序,style-loader,css-loader,less-loader
        ]
    },
    ...
  ],
  plugins: [
   new MiniCssExtractPlugin({ // 抽出css,单独将less提出类,rule中的loader有用到
      //类似于webpackOptions.output中相同选项的选项
      //所有选项都是可选的
      filename: 'style/[name].css', //放在build/style下面,以自己的名字命名
      ignoreOrder: false, // 启用以删除有关冲突顺序的警告
    }),
    ...
  ]
}

结果: