webpack 5 をとりあえず動かす

未分類

2021.03.012021.03.05

2020年10月10日にリリースされた
js のモジュールハンドラである webpack 5 を早速動かしてみましょう。

macOS Catalina で動作確認済みです。

まずは適当なフォルダを作り、その中に移動します

% mkdir test_webpack
% cd test_webpack

node.js がインストールされてない場合はインストールします

% brew install node

package.json の作成

% npm init -y

2020年10月10日の時点で生成される package.json は webpack のバージョンが 4系になっていて古いので、以下のように書き換えてください。

test_webpack/package.json

{
  "name": "test_webpack",
  "scripts": {
    "start": "webpack serve",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

node_modules の中身をインストールします

% npm install

test_webpack/webpack.config.js を作成

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devServer: {
    contentBase: './dist',
    open: true
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

test_webpack/src/index.js を作成

document.addEventListener('DOMContentLoaded', function() {
  document.body.textContent = 'from src/index.js';
});

test_webpack/dist/index.html を作成

<!DOCTYPE html>
<html>
  <head>
    <title>c'est index.html</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

webpack dev server を起動

% npm run start

以下のような画面が出れば成功です！

下記記事を参考にしました。

最新版で学ぶwebpack 5入門
https://ics.media/entry/12140

webpack を学ぶのにおすすめ書籍。

webpack 実践入門

速習webpack 速習シリーズ