Help us understand the problem. What is going on with this article?

webpack init で webpack.config.js を自動生成しよう

More than 1 year has passed since last update.

webpackで環境構築をする時に、毎回webpack.config.jsを手作業で作成していました。
面倒だったので、コマンドで作成できないか調べていたら、webpack initで普通に出来ました!

使い方

webpack init コマンドを実行するだけです。
npm initと同じ感覚で、対話形式でwebpack.config.jsを自動生成してくれます。

実際に試してみよう

準備

デモ用にディレクトリを作成して、webpackをインストールします。
webpack-cliwebpackコマンドをCLI上で利用するためのモジュールです。

npmコマンドでパッケージ管理をすると、ビルドで失敗するのでyarnを利用する必要があります。

$ mkdir webpack-init-demo && cd webpack-init-demo
$ yarn init -y
$ yarn add webpack webpack-cli

webpack.config.jsの生成

対話項目については、公式のリポジトリにドキュメントが置いてあるので、そちらをご参照ください。

webpack-cli/INIT.md at master · webpack/webpack-cli

$ npx webpack init

ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.

? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
? Are you going to use this in production? No
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? CSS
? Name your 'webpack.[name].js?' [default: 'config']:
yarn add v1.6.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
...
webpack.config.js
const webpack = require('webpack');
const path = require('path');

/*
 * We've enabled UglifyJSPlugin for you! This minifies your app
 * in order to load faster and run less javascript.
 *
 * https://github.com/webpack-contrib/uglifyjs-webpack-plugin
 *
 */

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

/*
 * SplitChunksPlugin is enabled by default and replaced
 * deprecated CommonsChunkPlugin. It automatically identifies modules which
 * should be splitted of chunk by heuristics using module duplication count and
 * module category (i. e. node_modules). And splits the chunks…
 *
 * It is safe to remove "splitChunks" from the generated configuration
 * and was added as an educational example.
 *
 * https://webpack.js.org/plugins/split-chunks-plugin/
 *
 */

module.exports = {
    output: {
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                options: {
                    presets: ['env']
                }
            },
            {
                test: /\.css$/,

                use: [
                    {
                        loader: 'style-loader',

                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },

    plugins: [new UglifyJSPlugin()],
    mode: 'development',

    optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            minChunks: 1,
            name: true,

            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    }
};

ビルド

最後に簡単なコードを書いて、ビルド出来るか確認してみます。

index.js
import _ from 'lodash'

_.each([1,2,3], (v) => console.log(v*2))
$ mkdir src && touch src/index.js
$ yarn add lodash
$ npx webpack
Hash: b3b3346c1e5aee203d71
Version: webpack 4.6.0
Time: 3397ms
Built at: 2018-04-21 22:45:06
                       Asset     Size  Chunks             Chunk Names
main.c1f2e2395b8f15edd497.js  548 KiB    main  [emitted]  main
Entrypoint main = main.c1f2e2395b8f15edd497.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/index.js] 275 bytes {main} [built]
    + 1 hidden module
$ node dist/main.c1f2e2395b8f15edd497.js
2
4
6

無事にビルドできました!(・ω・ノノ゙☆パチパチ

ビルドエラーについて

最後に自分がハマったビルドエラーについて補足しておきます。
npmを利用すると、ビルド時にERROR in Entry module not found: Error: Can't resolve 'babel-loader'が発生して、ビルドに失敗していました。

恐らく原因としてはwebpack.config.jsが生成される時に、yarn addで依存モジュールを追加しているのですが、この時にyarn側の問題が発生しているのかな?と思います。

別リポジトリにも同じ内容のissueがあり、これと同じ現象が起きていると思われます。
Entry module not found: Error: Can't resolve 'babel-loader' · Issue #237 · symfony/webpack-encore

t-yng
試したことを備忘録として書いています。
https://t-yng.jp/
hamee
happy mobile , easy e-commerce
http://next-engine.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away