vue: p24 项目打包相关配置：webpack.config.js 配置和 package.json

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

> demo1@1.0.0 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