webpack基本配置

webpack可在项目根目录创建webpack.config.js文件进行配置。
下面是最基础的配置，只有一个入口，一个出口，没有loader、plugin等。注意：动态加载的模块 不是 入口起点

const path = require('node:path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {

  },
  plugins:[],
  mode: 'development'
}

多入口

入口可以传递一个字符串或者字符串数组，chunk 会被命名为 main。或者一个对象，则每个属性的键(key)会是 chunk 的名称，该属性的值描述了 chunk 的入口点。

entry: {
   home: './src/main.js',
   count: './src/count.js',
   sum: './src/sum.js'
 },

每一个属性也可以是一个字符串、数组或者对象。对象包含以下配置：
1.filename除了在output.filename中提取（多入口时，output中配置filename将会报错），也可以为每个入口指定一个自定义的输出文件名
2.dependOn默认情况下每个入口打包的chunk保存了其用到的模块。使用dependOn则可以与另一个入口打包的chunk共享模块

entry: {
    main: {
      import: './src/main.js',
      filename: '[name].js',
      dependOn: 'count'
    },
    count: {
      import: './src/count.js',
      filename: '[name].js'
    },
    sum: './src/sum.js'
  },

还有layer、asyncChunks、chunkLoading等

‘none’ | ‘development’ | 'production’模式区别

1.development：会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development. 为模块和 chunk 启用有效的名。
2.production：会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production。为模块和 chunk 启用确定性的混淆名称。
none 不使用任何默认优化选项