見出し画像

webpackのプロジェクトの準備

npaka

「webpack」のプロジェクトの準備手順をまとめました。

(1) 「npm」「live-server」のインストール。
(2) プロジェクトフォルダの準備。

$ mkdir helloworld
$ cd helloworld
$ npm init -y

(3) 「webpack」のインストール。

$ npm i -D webpack webpack-cli

(4) 「package.json」の「scripts」を以下のように編集。

"scripts": {
  "start": "live-server dist",
  "build": "webpack",
  "watch": "webpack -w"
},

(5) 「webpack.config.js」をプロジェクトフォルダ直下に作成。

module.exports = {
  // development or production
  mode: "development",

  entry: "./src/index.js",
  output: {
    path: `${__dirname}/dist`,
    filename: "main.js"
  },
  resolve: {
    extensions: [".js"]
  }
};

(6) srcフォルダに「index.js」、distフォルダに「index.html」を作成。

 ・src/index.js

alert("Hello World")

・dist/inderx.html

<html>
  <head>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
  </body>
</html>


最終的なフォルダ構成は次のようになります。

・dist
   ・index.html
   ・main.js (ビルド後生成される)
・src
   ・index.js
・package.json
・webpack.config.js

(7) ビルド。
dist/main.jsが生成されます。

$ npm run build

(8) 実行。

$ npm run start

画像1


この記事が気に入ったらサポートをしてみませんか？