webpackで環境構築をする時に、毎回webpack.config.jsを手作業で作成していました。
面倒だったので、コマンドで作成できないか調べていたら、webpack initで普通に出来ました！
使い方
webpack init コマンドを実行するだけです。
npm initと同じ感覚で、対話形式でwebpack.config.jsを自動生成してくれます。
実際に試してみよう
準備
デモ用にディレクトリを作成して、webpackをインストールします。
webpack-cliはwebpackコマンドを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...
...
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
}
}
}
}
};
ビルド
最後に簡単なコードを書いて、ビルド出来るか確認してみます。
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