使用webpack5打包js文件

首先需要准備Nodejs環境，Nodejs中自帶npm包管理工具，下載地址：http://nodejs.cn/download/

1、設置npm包安裝路徑

npm config set prefix="D:\environment\nodejs\node_global"
 
npm config set cache=" D:\environment\nodejs\node_cache"

2、安裝webpack

npm install webpack -g
npm install webpack-cli -g

安裝成功后會有如下2個文件夾：

3、設置環境變量

將如下地址添加到系統環境變量Path中：

D:\environment\nodejs\node_global

4、測試webpack命令

cmd測試：

5、使用webpack5打包js

在項目目錄新增webpack.config.js文件，內容如下：

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個文件
  output: { // 輸出文件相關的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，輸出到哪個目錄中去
    filename: 'bundle.js' // 這是指定 輸出的文件的名稱
  },
  mode: 'development'
}

項目結構如下：

此時在vscode控制台輸入命令：  webpack  即可打包js

打包成功后，dist目錄下會生成bundle.js 文件， index.html中可通過script標簽引入使用。