MacにWebpackをいれて、Babel 7 を使えるようにする
前提
- npm (インストール方法)
Webpackインストール
npm install webpack --save-dev
ディレクトリ構成
こんなかんじに整える
/任意のディレクトリ
-- package.json
-- webpack.config.js
-- /src
-- /js
-- entrypoint.js
-- /moduleswebpack.config.jsの中身
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');
module.exports = {
// モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
mode: 'development',
// エントリーポイントの設定
entry: './src/js/entrypoint.js',
// 出力の設定
output: {
// 出力するファイル名
filename: 'bundle.js',
// 出力先のパス（v2系以降は絶対パスを指定する必要がある）
path: path.join(__dirname, 'public/js')
}
};
準備完了
あとは、bundleしたいプロジェクト全体の実行ファイルをentrypoint.jsに保存すればOK。（今回の例だと、import元ファイルたちはmodulesにいれてる）
実行
npx webpack
出力先に指定した場所に、bundle.jsができてる。
Babelとの連携
前回babelをインストールしたが、webpackとの連携に必要なパッケージを追加でインストール
npm install --save-dev babel-loader babel-preset-env babel-polyfill
今はbabel-preset-es2015のかわりにbabel-preset-envになってるみたい。
webpack.config.jsにloadersを追加
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');
module.exports = {
// モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
mode: 'development',
// エントリーポイントの設定
entry: './src/js/entrypoint.js',
// 出力の設定
output: {
// 出力するファイル名
filename: 'bundle.js',
// 出力先のパス（v2系以降は絶対パスを指定する必要がある）
path: path.join(__dirname, 'public/js')
},
module: {
rules: [
// {
// test: ビルド対象のファイルを指定
// includes: ビルド対象に含めるファイルを指定
// exclude: ビルド対象に除外するファイルを指定
// loader: loaderを指定
// query: loader に渡したいクエリパラメータを指定
// },
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query://loaderに渡したいクエリパラメータを指定します
{
presets: ['@babel/preset-env']
}
}
]
}
};これで、webpackと同時にbabelがかかる。
