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

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

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

> * [webpack 2 入門: CSS や image を bundle する | deadwood](https://www.d-wood.com/blog/2017/06/06_9007.html)

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

## Installation

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

> * [webpack-contrib/extract-text-webpack-plugin: Extract text from bundle into a file.](https://github.com/webpack-contrib/extract-text-webpack-plugin)

“`prettyprinted
% yarn add –dev extract-text-webpack-plugin
“`

## webpack.config.js

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

“`javascript: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 ファイルが出力されていることが確認できます。

“`prettyprinted
% $(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 も自動で生成されていますが、`` タグが追加されていることも確認できます。

“`html:dist/index.html








“`

> * [Add: Extract Text Plugin · DriftwoodJP/sandbox-webpack@60050e6](https://github.com/DriftwoodJP/sandbox-webpack/commit/60050e6b195b1dd73ce246b70dabdbb31b39d7b9)

## 補遺

> * [Getting Started with CSS Modules | CSS-Tricks](https://css-tricks.com/css-modules-part-2-getting-started/)
[/markdown]