WebPack Packing CSS @ Modern Web and App Programming

學完 vendor bundling 之後，接下來也要把 CSS 一起塞進 webpack 裡做模組化概念。

總之先安裝相關的 package

npm install --save-dev css-loader style-loader

接著在自己的 JS 裡，就可以 import CSS 檔

import './module-1.css';

老樣子需要去 webpack.config.js 裡做些設定

// in webpack.config.js

var path = require('path');

var webpack = require('webpack');
module.exports = {

    context: path.resolve(__dirname, './src'),

    entry: {

        main: './main.js',

        vendor: ['lodash']

},

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: '[name].bundle.js'

},

    module: {

        rules: [

{

                test: /\.css$/,

                // webpack 預設只認 JS 檔，透過這個可加入辨認 CSS

                use: ['style-loader', 'css-loader']

                // 從後往前 load，此例會先 load css-loader

}

]

},

    plugins : [

        new webpack.optimize.CommonsChunkPlugin({

            name: 'vendor',

            filename: 'vendor.bundle.js',

            minChunks: 2            

}),

]

};

一樣執行 npm 就可以了

npm run build

20hrs