通过对节点进行一些调整,您可以创建一个entry
对象来传递配置。在我的情况下,我使用了第二级文件夹的名称来创建不同的捆绑包,但您可以轻松地根据自己的需求进行调整。
const path = require('path');
var glob = require('glob')
const exportPath = path.resolve(__dirname,`./../public/javascripts/plugins`);
const entryArray = glob.sync('./plugins/**/{svg,src}/**/*.*');
var folders = []
var entries = {};
entryArray.map((item) => {
const folderName = item.split('/')[2];
if (!folders.includes(folderName)) {
folders.push(folderName);
}
});
folders.map((folder) => {
var imports = [];
entryArray.map((item) => {
const folderName = item.split('/')[2];
if (folder == folderName) {
imports.push(item);
}
});
entries[folder] = imports
});
module.exports = {
entry: entries,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
presets: [ '@babel/preset-env' ],
},
}
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-nested-ancestors'),
require('postcss-nested')
]
}
}
]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader?removeSVGTagAttrs=false'
}
],
},
output: {
path: exportPath,
filename: '[name]/dist/bundle.js',
libraryTarget: 'umd',
libraryExport: 'default'
}
};
webpack.config.js
文件中,我创建了几个不同的配置,根据我运行不同的npm
脚本时设置的 NODE_ENV 环境变量来进行切换。例如,在我的package.json
文件中,我有一个名为build-dev
的脚本,运行"set NODE_ENV=development&& webpack"
。希望这能给你一些想法! - Ganonside