补充webpack的打包知识

解释打包后显示的信息

• Hash：他的值代表了本次打包的唯一的值 （但这里没有）
• webpack版本
• 耗时
• asset：意思就是打包出的文件是 bundle.js
• name: main是js文件对应的名字，也可以理解为入口文件的名字，然后打包index.js ->header->sidebar->content

重点讲一下

name为什么是main

:::info 在我们写入口文件entry的时候，其实真正的代码是这样的 :::

// node.js的文件模块
const path = require('path')
module.exports = {
  // entry: './src/index.js' 这种是简写
  entry: {
    // 其实是这样的
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

环境

另外我们发现, 这里有个警告：在webpack配置的时候，没有指定打包的环境 虽然他的默认模式就是生产模式：production

我们可以设置两种环境： development 开发 production 生产

// node.js的文件模块
const path = require('path')
module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

没有任何报错

通过生产模式打包的代码会经过压缩

如果模式为开发模式，代码并不会被压缩

// node.js的文件模块
const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}