share facebook facebook twitter menu hatena pocket slack

2017.06.26 MON

逆引きWebpackの使い方

二神 暢彦

WRITTEN BY 二神 暢彦

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のエントリーファイルが更新されるとブラウザが自動更新されます。

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

元記事はこちら

逆引きWebpackの使い方

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。