配置webpack 对 CSS 文件的处理

我只是想合并 CSS 啊！这里写一点收获。

插件

extract-text-webpack-plugin

用法

首先，
npm install --save-dev extract-text-webpack-plugin
npm install --save-dev style-loader
npm install --save-dev css-loader

然后写配置文件，这里给出完整配置文件

//webpack.config.js
const path = require('path)
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './js/index.js',  入口文件
  output: {      出口
    filename: 'bundle.js',    输出文件
    path: path.resolve(__dirname,'dist')  //输出文件夹 dist
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({  //use表示使用，这里使用插件
          fallback: "style-loader",  //fallback，表示编译后使用 style-loader
          use: "css-loader"  //使用 css-loader
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')  //使用插件
  ]
}

最后，在入口文件中 import css

//index.js
import '../css/a.js'
import '../css/b.js'
import '../css/c.js'

ok，npm run build

在出口文件夹中得到 style.css ，合并压缩css成功，link 到 html 中即可使用！