逆引きWebpackの使い方 #JavaScript

cloudpack あら便利カレンダー 2017 10日目の記事です。

最近はもっぱらWebpackです。
gruntがあんまり好きになれず、その後にきたgulpでしばらくやってましたが、
昨年からはもっぱらWebpackを使うようになりました。

npmに公開されているライブラリをモジュールとして扱いやすかったり、
JSフレームワークをつかったSPAサイトのソースコンパイルがしやすかったりと最近のフロントエンド開発を行うにはなにかと便利なツールです。

ただ実際開発に利用するとなると何かとこれはどうするの？ってのが出てくるので逆引き的に使えるようなリストを書きました。
基本公式サイトにのってる内容になります。 Webpack公式
ざっくり知っときたいけど、英語の公式読むの面倒ってかたの役に立てばいいなーと思います。

出力するファイルをわける、名前を指定する

まずは基本編。

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
    },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

entryのキーに指定した名前がファイル名になって出力されます。
全ページに利用するようなライブラリをvendor.jsとしてまとめたり、各ページのファイルを管理したりするときに利用します。

Sassをコンパイルする

まずは yarn add sass-loader css-loader style-loader node-sass --dev でloaderを追加

module.exports = {
…省略
devtool: "source-map",
module: {
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader", options: {
                sourceMap: true
            }
        }, {
            loader: "sass-loader", options: {
                sourceMap: true
            }
        }]
    }]
}
…省略
}

ソースマップがいらない場合はdevtool、optionsの部分は不要です。

CSSファイルとして出力する

通常だとWebpackで出力されたCSSはimportされたJSファイルに組み込まれ、実行時に動的に style属性として生成されます。
個別にファイルとして出力するにはまず yarn add extract-text-webpack-plugin --devでプラグインを追加。

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
…省略
    plugins: [
        new ExtractTextPlugin({
            filename: "css/[name].css"
        })
    ]
…省略  
};

ただし、entryポイントになるJSファイル(内容は import "style.css"）は空ファイルとして出力されてしまいます。

ES6のコンパイルをbabelでする

まず yarn add babel-loader babel-core babel-preset-env --dev

// rulesにbabel-loaderを追加
rules: [
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env'],
        plugins: [require('babel-plugin-transform-object-rest-spread')]
      }
    }
  }
]

開発時とプロダクションでコンパイルコードをわける

yarn add cross-env --dev

webpackコマンドの実行時に cross-env NODE_ENV=production webpack 環境変数に値を設定する。
webpack.config.js内に if (process.env.NODE_ENV === 'production') と書くことで設定された値によって分岐が出来ます。

開発用サーバをたてる（HMR）

yarn add webpack-dev-server --dev

package.jsonのscriptで webpack-dev-server --open を実行する。
webpackのエントリーファイルが更新されるとブラウザが自動更新されます。

他にもいろいろあるんですが、とりあえずこの辺を押さえておけばあとは必要に合わせて公式をみればわかるかなといったかんじ。
気が向いたら項目も随時更新していこうと思いますー