[webpack] webpack 2 入門: Extract Text Plugin で CSS ファイルを出力する

公開日: 2017/06/07
更新日: 2018/10/03

bundle されている CSS を静的なファイルとして出力します。

導入した外部ライブラリの CSS や Web Font が、JavaScript で style に差し込まれていることを下記で確認しました。

この asset を他でも活用できるように、Extract Text Plugin を利用してファイル出力します。

Contents

Installation

プラグインをインストールします。

% yarn add --dev extract-text-webpack-plugin

webpack.config.js

プラグインを読込、.css の処理に加えます。
出力されるファイル名を指定します。

webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    :
  module: {
    rules: [
    :
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        }),
      },
    ],
    :
  },
  plugins: [
    :
    new ExtractTextPlugin('stylesheets/style.css'),
  ],
};

Usage

webpack コマンドを実行します。
css ファイルが出力されていることが確認できます。

% $(yarn bin)/webpack
Hash: e072bab9a140b4afaeb5
Version: webpack 2.6.1
Time: 5158ms
                Asset       Size  Chunks                    Chunk Names
           vendors.js     251 kB       0  [emitted]  [big]  vendors
               app.js     357 kB       1  [emitted]  [big]  app
stylesheets/style.css    23.6 kB       1  [emitted]         app
           index.html  288 bytes          [emitted]
    :

このサンプルでは HTML も自動で生成されていますが、<head><link> タグが追加されていることも確認できます。

dist/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="stylesheets/style.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="vendors.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>

補遺