フロント構築時のwebpack環境設定1

$ node -v
v12.18.3
$ npm -v
6.14.6

// package.json生成
$ npm init -y

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

// webpack本体のインストール
$ npm i -D webpack webpack-cli
$ ls
node_modules package-lock.json package.json

### src, distフォルダの作成
$ ls
dist node_modules package-lock.json package.json src

/src/index.js

import { hello } from "./sub";

hello();
[/jqvascript]

/src/sub.js

export function hello(){
	alert("hello method is executed.");
}

### webpackによるbuild
$ npx webpack
Hash: 910d84f6d37763164f2d
Version: webpack 4.43.0
Time: 127ms
Built at: 07/25/2020 12:01:30 AM
Asset Size Chunks Chunk Names
main.js 986 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 103 bytes {0} [built]
| ./src/index.js 40 bytes [built]
| ./src/sub.js 63 bytes [built]

### package.jsonのカスタマイズ
最低限の記述だけにし、npm run buildで実行できるようにする

{
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

$ npm run build

### webpack.config.js
– エントリーポイントを指定しなければ自動的に「src/index.js」がエントリーポイントに、出力先を指定しなければ自動的に「dist/main.js」に出力される
– modeを”development”にするとソースマップが出力される
/webpack.config.js

module.exports = {
	entry: `./src/index.js`,

	output: {
		filename: "main.js"
	}
};

### webpackでローカルサーバを起動し、変更時にブラウザリロード
$ npm i -D webpack-dev-server

– package.jsonに”start”を追加する
/package.json

{
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

– config.jsでhostとportを指定する
/webpack.config.js

module.exports = {
	entry: `./src/index.js`,

	output: {
		filename: "main.js"
	},

	mode: "development",

	devServer: {
		host: '192.168.33.10',
		port: '8000',
		contentBase: "dist",
		open: true
	}
};

$ npm run start

OK、次は、webpackにsassを入れます。