webpack：详解entry和output一些重要API的使用
文章目录
-
- context
- entry
-
- 单个入口
- 多个入口
- entry相关API
- 例一
- 例二
- 例三
- output
-
- output.assetModuleFilename
- output.chunkFilename
- output.clean【5.20.0+版本支持】
- output.filename【重要】
- output.globalObject
- output.library【重要】
- output.library.name
- output.library.type【重要】
- output.library.auxiliaryComment
- output.path【重要】
- output.publicPath
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` here
type: '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 below
publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `` 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()