環境建立

首先建立資料夾webpack(可自訂名稱)並以vscode開啟 按下ctrl+`(開啟終端機)輸入
npm init -y
產生package.json
沒有跳出以下內容可輸入 npm init 自定義或複製以下覆寫內容

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

npm安裝webpack
npm install --save-dev webpack webpack-cli
(npm可同時安裝多個)
出現node_modules和package-lock.json就是成功了
package.json中的devDependency可看安裝的版本號

進入點(entry)、輸出點(output)

在目錄中新增(entry)src資料夾，src內再新增index.js檔案(兩者名稱為預設值，可於config.js中更改)
接者在package.json中找到scripts內加入 "build": "webpack"
terminal輸入 npm run build 會出現dist資料夾及main.js(output)
index.js內容會顯示在main.js中

自訂entry、output

官網範例
目錄新建
webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development', //可切換為production
  entry: './foo.js', //foo可自訂 可新增foo.js確認(注意路徑的位置 原本是在src中)
  output: {
    path: path.resolve(__dirname, 'dist'), //dist可自訂
    filename: 'foo.bundle.js', //foo.bundle可自訂
  },
};
//_dirname為當前路徑

模式切換

在package.json 的scripts中加入
    "dev": "webpack --mode development",
    "deploy": "webpack --mode production"
    
terminal輸入npm run dev(deploy)即可執行開發模式或上線模式

以下entry改回預設src/index.js

import 流程

在與index.js同層新增importTest.js(自訂)
內容加入
export default "testText";

index.js中加入
import CustomName from "./importTest"; //CustomName(可自訂)
console.log(CustomName);
terminal輸入
npm run deploy即可看到已載入 (npm run dev 也可 比較難找)

將bundle引入到html

在dist資料夾新增index.html
body中加入<script src="./foo.bundle.js"></script>
Go Live即可檢視

載入css-loader

termianl輸入 npm install --save-dev css-loader
還有 npm install --save-dev style-loader
src內新增style.css
[css-loader](https://webpack.js.org/loaders/css-loader/)
 module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
貼到webpack.config.js的module.exports中
接者在index.js中
import css from "./style.css"; //css(名稱可自訂)

載入 sass-loader(概念同上)

[scss-loader](https://v4.webpack.js.org/loaders/sass-loader/)
terminal 輸入 npm install sass-loader sass --save-dev
src內新增style.scss
index.js中 加入 import scss from "./style.scss";
rules中 test修改為/\.s[ac]ss$/i use中新增"sass-loader"
rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],

載入webpack-dev-server(效果類似live server)

[npm連結](https://www.npmjs.com/package/webpack-dev-server)
terminal輸入 npm install webpack-dev-server --save-dev
[webpack官網](https://webpack.js.org/configuration/dev-server/#devserver)
在config.js的module.exports中加入以下物件
devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),  //dist可自訂
    },
    compress: true,
    port: 9000,
    open: true,
  }
  
接著將package.json scripts中dev指令的webpack改為webpack server
接者輸入npm run dev 即可自動更新(如同live server)
再也不用無限輸入npm run dev了!
即可自動開啟頁面不用自己打127.xxx網址

載入axios

[npm axios](https://www.npmjs.com/package/axios)
terminal 輸入 npm i axios 
若package.json出現axios版本表示安裝成功
在index.js中輸入
import axios from "axios"
axios
  .get("https://hexschool.github.io/ajaxHomework/data.json") //測試連結
  .then((res) => console.log(res));
回傳物件成功表示已載入