Zenn
⛳

Webpack導入の備忘録

2022/03/27に公開
webpack
tech

Webpackを導入してアプリの基盤を作ったときの備忘録。

src/index.jsをビルドできるようにする

  • src/index.js を作成する
src/index.js
console.log("Hello world");
  • package.jsonを作成する
yarn init -y
  • Webpackを導入する
yarn add --dev webpack webpack-cli
  • package.jsonを編集し、npm-scriptsでWebpackを実行できるようにする
package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "scripts": {
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production"
  }
}
  • 以下のコマンドで開発ビルド、本番ビルドができるようになる
開発ビルド
yarn dev
本番ビルド
yarn prod

参考

開発サーバーでビルドしたアプリを立ち上げられるようにする

  • 必要なライブラリを導入する
yarn add --dev webpack-dev-server html-webpack-plugin
  • webpack.config.jsを編集する(HtmlWebpackPluginを読み込む)
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");

module.exports = {
  mode: "development",

  entry: "./src/index.js",
 
  output: {
   
    path: path.join(__dirname, "dist"),
    filename: "index.js",
  },

  plugins: [new HtmlWebpackPlugin()],

  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
    open: true,
  },
};
  • package.jsonを編集し、開発サーバーを立ち上げるコマンドを作る
package.json
{
  "name": "webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "scripts": {
    "dev": "webpack --mode=development",
    "prod": "webpack --mode=production",
    "start": "webpack serve"
  }
}
  • 以下のコマンドでサーバーを立ち上げることができる
yarn start
  • 立ち上げたサーバーのブラウザのコンソールログにHello worldが出力される

参考

Discussion