Webpack (一) -- entry point 和 output

Webpack (一) -- entry point 和 output

核心概念

webpack-cli 用于在命令行中运行 webpack

• entry point
• output
• loader
• plugins
• mode

🐥 可扩展的 webpack 配置：可重用并且可以与其他配置组合使用

入口起点

从这里，应用程序开始启动执行，根据每一个入口文件创建一个依赖图

依赖图：任何时候一个文件依赖于另一个文件，webpack 视为文件间的依赖关系，
即使是非代码资源，webpack 会递归构建一个依赖图，最后打包成一个 bundle

单入口文件

✅ chunk 命名问题:

如果 entry 是 string 或者 stirng[]，chunk 会被命名为 main，
如果传入对象，chunk 命名为 [key]

const config = {
  entry: './src/app.js'

  // 对象写法更具扩展性
  entry: {
    app: './src/app.js',
  },
}

多页面应用程序

使用 CommonsChunkPlugin 复用入口起点的代码/模块

通常每个 HTML 文档只使用一个 entry point

输出文件 output

向磁盘写入编译文件

即使有多个入口，只能指定一个输出文件

配置

• filename: 输出文件名
• path: 输出文件绝对路径
• sourceMapFilename: 启用了 devtool 的 SourceMap 选项才可以使用，默认为 "[file].map"，建议只使用 [file] 占位符

const config = {
  // 至少包含 filename 和 path
  output: {
    filename: '',
    path: '',
  },

  // 多入口文件时，使用占位符
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
}

🚀 webpack.config.js 配置

const path = require('path')

module.exports = {
  entry: {
    main: './src/index.js',
  },

  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
}