webpack單獨打包一個less文件

須要將btn.less文件用webpack打包後，放到項目中。在網上百度了各類，遇到了不少問題，如今我將整個步驟整理以下：

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

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

二、建立package.json文件，在該文件夾下運行：

npm init

三、在init_webpack文件夾下建一個src文件夾，裏面建一個main.js做爲入口文件，將須要打包的btn.less也放入該文件夾下，如圖所示

main.js

import './btn.less';

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

四、在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

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

六、若是要壓縮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
 })

七、這是全部安裝的插件以及版本，由於插件版本出現不少次問題，因此須要注意一下