webpack：详解entry和output一些重要API的使用

context

说 entry 和 output 之前要先说一下 context，也就是上下文对象。

Webpack 在寻找相对路径的文件时会以 context 为根目录，context 默认为执行启动 Webpack 时所在的当前工作目录。 如果想改变 context 的默认配置，则可以在配置文件里这样设置它：

module.exports = {context: path.resolve(__dirname, 'app')
}

之所以在这里先介绍 context，是因为 Entry 的路径和其依赖的模块的路径可能采用相对于 context 的路径来描述，context 会影响到这些相对路径所指向的真实文件。

entry

单个入口

module.exports = {entry: {main: './path/to/my/entry/file.js',},
};
// 简写
module.exports = {entry: './path/to/my/entry/file.js',
};

所以可以看到，我们使用默认配置的时候，也就是 output 不指定输出的名称，那么打包出的文件是 main.js，就是因为我们入口这里默认是 main。

多个入口

两种写法

module.exports = {entry: ['./src/file_1.js', './src/file_2.js']
};module.exports = {entry: {app: './src/app.js',adminApp: './src/adminApp.js',},
};

对象写法的好处是可扩展性强，可以将其拆分然后用专门的工具（如 webpack-merge）将它们合并起来。

entry相关API

• dependOn: 当前入口所依赖的入口。它们必须在该入口被加载前被加载。
• filename: 指定要输出的文件名称。
• import: 启动时需加载的模块。
• library: 指定 library 选项，为当前 entry 构建一个 library。
• runtime: 运行时 chunk 的名字。如果设置了，就会创建一个新的运行时 chunk。在 webpack 5.43.0 之后可将其设为 false 以避免一个新的运行时 chunk。
• publicPath: 当该入口的输出文件在浏览器中被引用时，为它们指定一个公共 URL 地址。请查看 output.publicPath。

这些 API 很少用到，而且这些主要是用来做代码分割的，而我们做代码分割一般用 optimization.splitChunks 来做，可以看我这篇文章

例一

module.exports = {//...entry: {home: './home.js',shared: ['react', 'react-dom', 'redux', 'react-redux'],catalog: {import: './catalog.js',filename: 'pages/catalog.js',dependOn: 'shared',chunkLoading: false, // Disable chunks that are loaded on demand and put everything in the main chunk.},personal: {import: './personal.js',filename: 'pages/personal.js',dependOn: 'shared',chunkLoading: 'jsonp',asyncChunks: true, // Create async chunks that are loaded on demand.layer: 'name of layer', // set the layer for an entry point},},
};

例二

使用dependOn，app 这个 chunk 就不会包含 react-vendors 拥有的模块了.

module.exports = {//...entry: {app: { import: './app.js', dependOn: 'react-vendors' },'react-vendors': ['react', 'react-dom', 'prop-types'],},
};

dependOn 选项的也可以为字符串数组：

module.exports = {//...entry: {moment: { import: 'moment-mini', runtime: 'runtime' },reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },testapp: {import: './wwwroot/component/TestApp.tsx',dependOn: ['reactvendors', 'moment'],},},
};

例三

加载动态入口

// 同步
module.exports = {//...entry: () => './demo',
};// 异步
module.exports = {//...entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),
};// 异步接口加载
module.exports = {entry() {return fetchPathsFromSomeExternalSource(); // 返回一个会被用像 ['src/main-layout.js', 'src/admin-layout.js'] 的东西 resolve 的 promise},
};

output

output.assetModuleFilename

静态资源文件名称，如图片字体图标等
默认： string = '[hash][ext][query]'
可以使用 ：[name], [file], [query], [fragment], [base] 与 [path]

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'images/[hash][ext][query]'},module: {rules: [{test: /\.png/,type: 'asset/resource'}]},
};

说句题外话，一般不会在 output 中改变资源名称，而是在这里

const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'main.js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'images/[hash][ext][query]'},module: {rules: [{test: /\.png/,type: 'asset/resource'}},{test: /\.html/,type: 'asset/resource',// 这里generator: {filename: 'static/[hash][ext][query]'}}]},
};

output.chunkFilename

输出的 chunk 文件名。

module.exports = {//...output: {chunkFilename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';},},
};

一般我们也不用这个设置，而是用 optimization.splitChunks 来做，可以看我这篇文章

output.clean【5.20.0+版本支持】

清除打包后的资源，和 CleanWebpackPlugin 插件作用差不多。

module.exports = {//...output: {clean: true, // 在生成文件之前清空 output 目录},
};

output.filename【重要】

每个输出 bundle 的名称，这些 bundle 将写入到 output.path 选项指定的目录下。

module.exports = {//...output: {filename: 'bundle.js',},
};module.exports = {//...output: {filename: '[name].bundle.js',},
};module.exports = {//...output: {filename: (pathData) => {return pathData.chunk.name === 'main' ? '[name].js' : '[name]/[name].js';},},
};

id Chunk 的唯一标识，从0开始
name Chunk 的名称
hash Chunk 的唯一标识的 Hash 值
chunkhash Chunk 内容的 Hash 值
其中 hash 和 chunkhash 的长度是可指定的，[hash:8] 代表取8位 Hash 值，默认是20位。

output.globalObject

默认：string = 'self'
当输出为 library 时，尤其是当 libraryTarget 为 'umd’时，此选项将决定使用哪个全局对象来挂载 library。

module.exports = {// ...output: {library: 'myLib',libraryTarget: 'umd',filename: 'myLib.js',globalObject: 'this',},
};

output.library【重要】

输出一个库，为你的入口做导出。

module.exports = {// …entry: './src/index.js',output: {library: 'MyLibrary',},
};

举例：
使用上面的配置打包该文件

export function hello(name) {console.log(`hello ${name}`);
}

打包后可以这样使用

<script src="https://example.org/path/to/my-library.js"></script>
<script>MyLibrary.hello('webpack');
</script>

output.library.name

同上

output.library.type【重要】

配置库暴露的方式。
类型默认包括 ‘var’、 ‘module’、 ‘assign’、 ‘assign-properties’、 ‘this’、 ‘window’、 ‘self’、 ‘global’、 ‘commonjs’、 ‘commonjs2’、 ‘commonjs-module’、 ‘commonjs-static’、 ‘amd’、 ‘amd-require’、 ‘umd’、 ‘umd2’、 ‘jsonp’ 以及 ‘system’，除此之外也可以通过插件添加。

举例

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'var',},},
};var MyLibrary = _entry_return_;
// 在加载了 `MyLibrary` 的单独脚本中
MyLibrary.doSomething();

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'assign',},},
};// 直接赋值给MyLibrary，不管有没有定义，慎用
MyLibrary = _entry_return_;
// 使用assign-properties更安全：如果 MyLibrary 已经存在的话，它将被重用

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'this',},},
};this['MyLibrary'] = _entry_return_;// 在一个单独的脚本中
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // 如果 `this` 为 window 对象

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'window',},},
};window['MyLibrary'] = _entry_return_;window.MyLibrary.doSomething();

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'global',},},
};global['MyLibrary'] = _entry_return_;global.MyLibrary.doSomething();

module.exports = {// …output: {library: {name: 'MyLibrary',type: 'commonjs',},},
};exports['MyLibrary'] = _entry_return_;require('MyLibrary').doSomething();

module.exports = {// …// 试验性质的模块要加上这个experiments: {outputModule: true,},output: {library: {// do not specify a `name` here，输出 ES 模块。type: 'module',},},
};

module.exports = {// …output: {library: {// note there's no `name` heretype: 'commonjs2',},},
};module.exports = _entry_return_;require('MyLibrary').doSomething();

...还有amd、umd，用的都比较少，我们正常一般不指定，所以我们导出的库支持所有导入方式，或者我们使用esmodule也不错

output.library.auxiliaryComment

给打包后的文件中不同的导出方式做注释

module.exports = {// …mode: 'development',output: {library: {name: 'MyLibrary',type: 'umd',auxiliaryComment: {root: 'Root Comment',commonjs: 'CommonJS Comment',commonjs2: 'CommonJS2 Comment',amd: 'AMD Comment',},},},
};

output.path【重要】

默认 string = path.join(process.cwd(), 'dist')

const path = require('path');module.exports = {//...output: {path: path.resolve(__dirname, 'dist/assets'),},
};

output.publicPath

一般用根目录的 publicPath

module.exports = {//...output: {// One of the belowpublicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）publicPath: '//cdn.example.com/assets/', // CDN（协议相同）publicPath: '/assets/', // 相对于服务(server-relative)publicPath: 'assets/', // 相对于 HTML 页面publicPath: '../assets/', // 相对于 HTML 页面publicPath: '', // 相对于 HTML 页面（目录相同）},
};

const getPublicPath = () => {if (process.env.NODE_ENV === "development") {return "/project_name";} else {return `//cdn.xxx.com/repo/project_name/dist/`;}
};
publicPath: getPublicPath()