Webpack核心概念

Posted 2023-01-11 aiguangyuan

1. 核心概念 Entry

Entry 用来指定 webpack 的打包入口。

依赖图的入口是 entry，通过该入口，将代码、图片、字体等 依赖不断加入到依赖图中。

Entry 的用法：

1. 单入口：entry 是一个字符串；

module.exports = 
    entry: './path/to/my/entry/file.js'
;

2. 多入口：entry 是一个对象；

module.exports = 
    entry: 
        app: './src/app.js',
        user: './src/user.js'
    
;

2. 核心概念 Output

Output 用来告诉 webpack 如何将编译后的文件输出到磁盘。

1. 单入口配置；

module.exports = 
    entry: './src/index.js'
    output: 
        filename: 'bundle.js’,
        path: path.join(__dirname, 'dist'),
    
;

2. 多入口配置；

多个入口时，output的filename需要一个占位符来进行区分。

module.exports = 
    entry: 
        app: './src/app.js',
        search: './src/search.js'
    ,
    output: 
        filename: '[name].js',
        path: path.join(__dirname, 'dist'),
    
;

3. 核心概念 Loaders

Webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型把它们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的Loaders有哪些？

Loaders的用法： 

4. 核心概念 Plugins

插件用于 bundle 文件的优化，资源管理和环境变量注入，作用于整个构建过程。

常⻅的 Plugins 有哪些？

Plugins的用法：

5. 核心概念 Mode

Mode 用来指定当前的构建环境是：production、development 还是 none。

设置 mode 可以使用 webpack 内置的函数，默认值为 production。 Mode内置的函数功能：