Loading CSS

為了設定 CSS 需要安裝一些 loaders：

npm i css-loader style-loader --save-dev

設定 loaders：

libs/parts.js

...
exports.setupCSS = function(paths) {
  return {
    module: {
      loaders: [
        {
          test: /\.css$/,
          loaders: ['style', 'css'],
          include: paths
        }
      ]
    }
  };
}

設定 config：

webpack.config.js

...

switch(process.env.npm_lifecycle_event) {
  case 'build':

    // config = merge(common, {}); // 移除這行


    config = merge(
      common,
      parts.setupCSS(PATHS.app)
    );

    break;
  default:
    config = merge(
      common,

      parts.setupCSS(PATHS.app),

      ...
    );
}

module.exports = validate(config);

• loaders 會從右向左的順序執行，所以會先執行 css-loader，然後才是 style-loader
• css-loader 主要是解決 CSS 檔案的 @import 和 url
• style-loader 主要是在 JavaScript 處理 require

Loaders 主要就是處理原始檔案的變更，然後再回傳新的原始檔案。可以被串接（pipe）。 詳情可以參考 What are loaders? 以及 list of loaders

如果 include 沒有設定，Webpack 將會搜尋整個目錄的文件，拖垮效能。所以最好永遠都要記得設定。另外也有 exclude 選項可以用。