【Webpack】之 CSS单独打包（webpack 3.8.1）

（1）预备备

---

① webpack3.8.1 安装

​

② 包依赖

var glob = require(‘globby’);
​​​npm install globby​​

var ExtractTextPlugin = require(“extract-text-webpack-plugin”);
​​​npm install --save-dev extract-text-webpack-plugin​​

test: /.css$/, use: ExtractTextPlugin.extract(“css-loader”, “style-loader”)
​​​npm install css-loader style-loader --save-dev​​

（2）Coding

---

var path = require("path");
var glob = require('globby');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

// CSS入口配置
var CSS_PATH = {
  css: {
    pattern: ['./src/**/*.css'],
    src: path.join(__dirname, 'src'),
    dst: path.resolve(__dirname, 'dist')
  }
};

// 遍历除所有需要打包的CSS文件路径
function getCSSEntries(config)
    var fileList = glob.sync(config.pattern);
    return fileList.reduce(function (previous, current)
    var filePath = path.parse(path.relative(config.src, current));
    var withoutSuffix = path.join(filePath.dir, filePath.name);
    previous[withoutSuffix] = path.resolve(__dirname, current);
    return previous;
    }, {});
};

module.exports = [
    { // css
    devtool: 'cheap-module-eval（__dirname),
    entry: getCSSEntries(CSS_PATH.css),
    output: {
        path: CSS_PATH.css.dst,
        filename: '[name].css'
    },
    module: {
        rules: [{
        test: /\.css$/, use: ExtractTextPlugin.extract("css-loader", "style-loader")
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].css")
    ]
    },
    {  //js

（3）扩充，补充阅读

---

​​extract-text-webpack-plugin​​

​​globby​​

​​path​​

​​https://www.jianshu.com/p/439764e3eff2​​

​​别人的脚手架​​

​​别人的教程​​