У меня 3 страницы.
Вот моя структура каталогов.
Page1 & page2 полагаются на vue, page2 & page3 полагаются на jquery. Поэтому я использую SplitChunksPlugin для отделения фрагментов отпачки страниц.
Но проблема заключается в использовании html-webpack-plugin. Каждый HTML-код страницы должен включать js, необходимый как main.bundle.js, так и общий чанк js (например, page1 ~ page2.js), поэтому я должен получитьИмена commonChunk для фильтрации. Я могу получить эту информацию только из функции name, но она асинхронная.Итак, как я могу сгенерировать свой объект HtmlWebpackPlugin obj после завершения обратного вызова имени ...
Вот мой конфиг веб-пакета.
const pageDir = './page';
const indexPage = 'page1';
const pages = fs.readdirSync(pageDir);
console.log('__dirname', __dirname);
let splitChunksName = [];
const getPagesHtmlWebpackPluginList = () => {
console.log('splitChunksName',splitChunksName); // log [], expect after get splitChunksName to call
return pages.map( page => {
let regex = new RegExp(page);
let commonChunks = splitChunksName.filter(name => regex.test(name));
return new HtmlWebpackPlugin({
filename: `${page}/index.html`,
chunks: [`${page}/main`, ...commonChunks],
});
});
};
const getEntryObj = () => {
let entry = {};
pages.forEach(page => {
Object.assign(entry, {
[`${page}/main`]: [path.resolve(process.cwd(), pageDir, `./${page}/main.js`)]
})
});
return entry;
};
module.exports = {
mode: 'none',
entry: getEntryObj(),
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: module => {
// set 'name:true' the output dir becomes ugly, if chunk1 names 'a/b', chunk2 names 'c/d',
//then the common chunk12 will be 'venders~a/b~c/d.bundle.js', two ugly folders(venders~a , b~c)generated.
//So I write my own name function.
let arr = [];
module._chunks.forEach(chunk => {
arr.push(chunk.name.replace('/main',''));
});
let splitChunkName = 'vender/' + arr.join('~');
splitChunksName.push(splitChunkName);
//splitChunksName is needed,I need common chunk info to use with html-webpack-plugin
return splitChunkName;
}
}
},
plugins: [
...getPagesHtmlWebpackPluginList()
]
};