webpack單獨打包一個less文件

需要將btn.less文件用webpack打包后，放到項目中。在網上百度了各種，遇到了很多問題，現在我將整個步驟整理如下：

1、建一個空的文件夾，命名為init_webpack，在該文件夾下運行：
這里需要注意，安裝的是3.xx版本的webpack，安裝4以上版本會跟extract-text-webpack-plugin插件有沖突

//全局安裝webpack
npm install  -g  webpack@3
//在你的項目目錄下安裝
npm install --save-dev webpack@3

2、創建package.json文件，在該文件夾下運行：

npm init

3、在init_webpack文件夾下建一個src文件夾，里面建一個main.js作為入口文件，將需要打包的btn.less也放入該文件夾下，如圖所示

main.js

import './btn.less';

我用的webstorm，這里需要設置下javascript的版本，如圖：

4、在init_webpack文件夾下建建一個webpack.config.js文件

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
module.exports = {
  entry: './src/main.js',	
  output: {
  	path: path.resolve(__dirname, 'dist'),
  	filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader'],
        }),
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: true
              }
            },
            "less-loader"
          ]
        })
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin("btn.css")
  ]
};

這里需要安裝幾個插件
extract-text-webpack-plugin、css-loader、less、less-loader

5、運行webpack打包，dist文件夾中的btn.css就是打包后的文件

6、如果要壓縮btn.css文件
安裝插件：
npm install --save-dev optimize-css-assets-webpack-plugin@3

在webpack.config.js文件中加入如下代碼：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

以下這段加在plugins中：

new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
 })

7、這是所有安裝的插件以及版本，因為插件版本出現很多次問題，所以需要注意一下