webpack的核心

# 核心概念

module.exports = {
    mode: 'development', //development环境 production环境
    // 入口文件 告诉的webpack 要打包的文件
    entry: './src/index.js',  // 入口文件
    // 输出文件：告诉webpack 打包后文件放在哪里
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包文件后的具体路径
        filename: 'bundle.js',  // 打包后的文件名
    }
}

1
2
3
4
5
6
7
8
9
10

# Entry

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。

进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。

# Output

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。

基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。

path.resolve(__dirname, 'dist') 把一个路径或路径片段的序列解析为一个绝对路径。从右到左解析

# Module

模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

# Chunk

代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

# Loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

# Plugin

loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。

编辑

← webpack-loader webpack-plugins→