概要

babel(トランスパイラ)
webpack(モジュールバンドラ/ビルドヘルパー)で動くようにする

前提

node
- v10.16.1
JavaScript
- Pure JavaScript

webpack を導入したい
babel を導入したい

手順

babel

インストール

$ npm install -D babel-cli babel-preset-env

webpack

インストール

$ npm install -D webpack webpack-cli

webpack.config.js の生成

$ ./node_modules/webpack/bin/webpack.js init

# パスを通せば下記でよい
$ webpack init

下記が自動生成されたwebpack.config.js

webpack.config.js

const path = require('path');
const webpack = require('webpack');

/*
 * 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/
 *
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');

/*
 * We've enabled HtmlWebpackPlugin for you! This generates a html
 * page for you when you compile webpack, which will make you start
 * developing and prototyping faster.
 *
 * https://github.com/jantimon/html-webpack-plugin
 *
 */

module.exports = {
	mode: 'development',
	entry: './src/index.js',
  target: 'node',
	output: {
		filename: '[name].[chunkhash].js',
		path: path.resolve(__dirname, 'dist')
	},

	plugins: [new webpack.ProgressPlugin(), new HtmlWebpackPlugin()],

	module: {
		rules: [
			{
				test: /.(js|jsx)$/,
				include: [],
				loader: 'babel-loader',

				options: {
					plugins: ['syntax-dynamic-import'],

					presets: [
						[
							'@babel/preset-env',
							{
								modules: false
							}
						]
					]
				}
			}
		]
	},

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

			chunks: 'async',
			minChunks: 1,
			minSize: 30000,
			name: true
		}
	},

	devServer: {
		open: true
	}
};

動かしてみよう

webpack を実行して、babelでコンパイルしたソースをバンドルする

$ ./node_modules/webpack/bin/webpack.js

# パスを通せば下記でよい
$ webpack

最後に

なし

次回はこれ！

なし