webpack 学习笔记：核心概念（上）

想能顺畅使用 webpack 开发，前提就要明白其中牵涉到一些核心概念。先从全局角度，俯瞰大概，之后再深入细节，方能游刃有余。

webpack 中会涉及到如下几个核心概念：

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry

Entry 即 Entry point，即打包入口。从入口出发，发现依赖，以及依赖的依赖……直至所有依赖关系统计、分析完毕，最终会织成一张依赖网（dependency graph），确保能准确无误的打包项目。

Entry 可通过配置文件的 entry 选项指定，默认为 ./src/index.js。

// webpack.config.js
module.exports = {
    entry: './path/to/my/entry/file.js'
};

Output

有入口，就有出口。output 选项就是用来指定，项目打包后的目标地址的。

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
};

上面指定打包后目标地址是 dist/my-first-webpack.bundle.js。

Loaders

webpack 默认只能解析 JavaScript 和 JSON 文件。如果想能正确处理其他文件类型，就需要使用 Loader 做转换，将文件转换成 webpack 认识的有效 module。

// path/to/my/entry/file.js
const pkg = require('../../../../package.json')

function say(what = 'Hello webpack') {
    return `📢(v${pkg.version}) ${what}`
}

document.body.appendChild(
    document.createElement('h1').appendChild(document.createTextNode(say()))
)

这个文件能被成功打包。

如果是引入 .txt 文本，打包就会出错。

// path/to/my/entry/file.js
const pkg = require('../../../../package.json')
const p = require('./test.txt')

function say(what = 'Hello webpack') {
    return `📢(v${pkg.version}) ${what}`
}

document.body.innerHTML = `
    <h1>${say()}</h1>
    <p>${p}</p>
`

$ npx webpack

Hash: b42def63aa2778722737
Version: webpack 4.44.2
Time: 198ms
Built at: 2020-09-26 10:14:07 ├F10: AM┤
 1 asset
Entrypoint main = my-first-webpack.bundle.js
[0] ./path/to/my/entry/file.js 392 bytes {0} [built]
[1] ../package.json 310 bytes {0} [built]
[2] ./path/to/my/entry/test.txt 464 bytes {0} [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./path/to/my/entry/test.txt 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.
 @ ./path/to/my/entry/file.js 2:10-31

安装 raw-loader，添加对 .txt 文件的解析支持。

$ npm install raw-loader --save-dev

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            // See: https://webpack.js.org/loaders/raw-loader/
            { test: /\.txt$/, use: { loader: 'raw-loader', options: { esModule: false } } }
        ]
    }
};

loaders 配置项有两个：

• test: 匹配需要转换的文件
• use: 使用哪个 loader。值可以是字符串，也可以是对象

然后再次打包就没问题了。

（完）

本作品采用《CC 协议》，转载必须注明作者和本文链接