webpackのプロジェクトの準備
「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