1.打包配置package.json

"scripts": {
    "dev": "webpack serve", //冒號前可隨意命名，冒號後必須固定
    "build": "webpack --mode production" //【1】build可隨便命名，直接用webpack也可成功打包，但不會壓縮優化
  }

• webpack模式：main.js有354kb，時間相對短些
• webpack --mode production 模式：main.js只有94kb，命令會覆蓋webpack.config中的mode，時間也會更長
• 輸出位置和檔名與webpack.config中的output相關
  完成後即可直接執行打包命令 npm run build

2.打包相關webpack.config.js中mode的解釋

// 使用 Node.js 中的匯出語法，向外匯出一個 webpack 的配置物件
module.exports = {
  // 【1】mode 代表 webpack 執行的模式，可選值有兩個 development 和 production
  // 結論：開發時候一定要用 development，因為追求的是打包的速度，而不是體積；
  // 反過來，釋出上線的時候一定能要用 production，因為上線追求的是體積小，而不是打包速度快！
 // 正常直接用development，只要在package.json中配置覆蓋此處即可
    mode: 'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist/'),//輸出目錄
        filename:'js/main.js' //輸出檔名及目錄 js檔案全部輸出到js目錄內
    },
 

打包成功示例

PS G:\Demo\vue\demo1> npm run build

> [email protected] build
> webpack --mode production

assets by status 54.7 KiB [cached] 1 asset
asset js/main.js 93.2 KiB [emitted] [minimized] (name: main) 1 related asset
asset ./index.html 487 bytes [emitted]
runtime modules 1.72 KiB 5 modules
orphan modules 2.38 KiB [orphan] 3 modules
cacheable modules 319 KiB
  modules by path ./node_modules/ 315 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.44 KiB [built] [code generated]
      + 5 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB
      ./node_modules/css-loader/dist/runtime/noSourceMaps.js 64 bytes [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 2.26 KiB [built] [code generated]
    ./node_modules/jquery/dist/jquery.js 307 KiB [built] [code generated]
  modules by path ./src/ 3.84 KiB
    ./src/index.js + 3 modules 2.85 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/index.css 537 bytes [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/index.less 474 bytes [built] [code generated]
webpack 5.70.0 compiled successfully in 11027 ms