1、建立基本目錄結構---src原始檔和 index.html

2、初始化專案初始檔案---npm init -y

3、配置本地的webpack---- npm install -D webpack-cli

4、建立並配置----webpack.config.js

var path = require('path')
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.join(__dirname, './dist/'),//這裡需要拿到當前檔案的絕對路徑，然後系統會在此基礎上建立後面的路徑
		filename: 'bundle.js' //這個檔名可以更改。但最好起的有意義
	}
}
 

5、配置 npm scripts

  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.40.0"
  }
}

6、打包 ---npm run build

6.1、在src中新建js檔案：main.js 和foo.js

// main.js檔案
/* // 等價於
 var foo = require('./foo')
foo() */

// ES6的寫法
import foo from './foo'
foo()

// foo.js 檔案
/* // 等價於
module.exports = function (){
	console.log('foo中的js檔案')
}
 */
//ES6 的寫法
export default function(){
	console.log('foo中的js檔案')
}

6.2 執行 npm run build

得到build.js檔案

7、在index頁面中引用build.js檔案

得到執行結果