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

（1）预备备

---

① webpack3.8.1 安装

详见：http://blog.csdn.net/fanfan4569/article/details/79542058

② 包依赖

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-source-map',
    context: path.resolve(__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
    entry: {

    },
    output: {

    },

    plugins: [

    }
];

（3）扩充，补充阅读

---

extract-text-webpack-plugin

globby

path

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

别人的脚手架

别人的教程