运行 Webpack 每次都有不同的入口点,但仍然使用配置文件?
Running Webpack with different entry point each time, but still use a config file?
我有一个项目,其中包含许多不同网站的代码。这些不是我构建或维护的网站,我只是为它们构建组件并交付这些要在网站上实现的代码。
文件夹结构如下所示:
.
+-- tsconfig.json
+-- site_A
| +-- component1
| | +-- component1.html
| | +-- component1.css
| | +-- component1.js
+-- site_B
| +-- component2
| | +-- component2.ts
+-- my_modules
| +-- module1.ts
| +-- module2.ts
| +-- module3.ts
my_modules
文件夹包含我在许多组件中经常使用的函数,因此我想将它们编写为可重用的模块。我的问题是,因为这不是一个单独的项目,所以我不能真正 运行 对所有项目使用单个构建脚本,但实际上每次我 运行 Webpack 时都需要指定入口点。
我目前使用的解决方案是以下 npm 构建脚本:
"build": webpack --module-bind 'js=babel-loader' --module-bind 'ts=ts-loader' --output-path './build' --output-filename '[name].js'
然后我将入口点作为参数传递给它。但是,这使我无法使用 webpack.config.js
文件及其所有高级功能。
有没有一种方法可以使用配置文件并在 运行 构建时仍然能够指定入口点?如果其他模块捆绑器能提供更好的体验,我也愿意征求他们的建议。
我会尝试传入一个环境变量,其中包含您要构建的模块的名称,如 webpack --env.site=siteA
,然后在您的配置文件中,您可以像这样访问它:
module.exports = env => {
return {
entry: env.site + '/src/index.js',
output: {
filename: env.site + '.js',
path: path.resolve(__dirname, 'build')
}
}
}
有用的链接:
我有一个项目,其中包含许多不同网站的代码。这些不是我构建或维护的网站,我只是为它们构建组件并交付这些要在网站上实现的代码。
文件夹结构如下所示:
.
+-- tsconfig.json
+-- site_A
| +-- component1
| | +-- component1.html
| | +-- component1.css
| | +-- component1.js
+-- site_B
| +-- component2
| | +-- component2.ts
+-- my_modules
| +-- module1.ts
| +-- module2.ts
| +-- module3.ts
my_modules
文件夹包含我在许多组件中经常使用的函数,因此我想将它们编写为可重用的模块。我的问题是,因为这不是一个单独的项目,所以我不能真正 运行 对所有项目使用单个构建脚本,但实际上每次我 运行 Webpack 时都需要指定入口点。
我目前使用的解决方案是以下 npm 构建脚本:
"build": webpack --module-bind 'js=babel-loader' --module-bind 'ts=ts-loader' --output-path './build' --output-filename '[name].js'
然后我将入口点作为参数传递给它。但是,这使我无法使用 webpack.config.js
文件及其所有高级功能。
有没有一种方法可以使用配置文件并在 运行 构建时仍然能够指定入口点?如果其他模块捆绑器能提供更好的体验,我也愿意征求他们的建议。
我会尝试传入一个环境变量,其中包含您要构建的模块的名称,如 webpack --env.site=siteA
,然后在您的配置文件中,您可以像这样访问它:
module.exports = env => {
return {
entry: env.site + '/src/index.js',
output: {
filename: env.site + '.js',
path: path.resolve(__dirname, 'build')
}
}
}
有用的链接: