使用webpack搭建構建工具

npm init -y

npm i webpack@4 webpack-cli@3 webpack-dev-server@3 html-webpack-plugin -D

npm i mustache -S

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入
module.exports = {
  entry: path.resolve(__dirname, "src/index.js"), //
 
 打包入口檔案絕對路徑
  output: {
    path: path.resolve(__dirname, "build"), // 輸出資料夾絕對路徑 D:\00code\11webpack\build
    filename: "js/built.js", //輸出檔名
  },

  // 外掛配置 下載=》引入=》使用
  plugins: [
    // new HtmlWebpackPlugin()  預設會建立一個空基本結構的html檔案，自動引入打包輸出（bundle也就是output輸出的filename）後的所有資源
    new HtmlWebpackPlugin({
      filename: 
 
"index.html", //指定生成html檔名，預設是index.html
      template: path.resolve(__dirname, "src/index.html"), //全盤複製./src/index.html裡面所有內容（指定模板頁面），並且自動引入打包輸出（bundle也就是output輸出的filename）後的所有資源
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "build"), //專案構建後的路徑
    open: true, //自動開啟瀏覽器
    port: 4000, //
 
埠
    compress: true, //啟動gzip壓縮
  },
  //模式
  mode: "development", //development production
};

package.json

"scripts": {
    "serve": "webpack-dev-server"
  },