webpack初体验

webpack初体验

• 小技巧：为了在编写webpack.config.js配置文件的时候可以有代码 提示，我们可以把这样的一行代码放到导出语句之前

• /**
   * @type {import('webpack').Configuration}
   */
  module.exports = { ... }
  1
  2
  3
  4

1. 两种模式的说明

• 开发模式：仅仅能打包 ESM 语法
• 生产模式：还能压缩js代码

2. 5大核心概念

• entry
• output
• loader
• plugin
• mode

3. 基础配置

module.exports = {
  entry: './src/index.js', // 设置入口文件
  // 设置打包出口
  output: { 
    filename: 'dist.js',
    path: path.join(__dirname, '/dist') // 出口路径要求必须是绝对路径
  },
  module:{
    rules: [
      // loader
    ]
  },
  plugins: [],
  mode: '' 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 执行打包命令

npx webpack

• 这个命令会自动的检测并加载根目录的webpack.config.js文件，把配置对象中的配置作为webpack的配置执行打包

5. 检查输出目录

• 查看我们配置的输出目录是否有打包好的文件输出，尝试引入一下是否可以正常运行