Skip to content

Instantly share code, notes, and snippets.

@DalSoft
Last active January 14, 2020 13:20
Show Gist options
  • Save DalSoft/d8a2cd57c06d84e3619e9856a8b4de1e to your computer and use it in GitHub Desktop.
Save DalSoft/d8a2cd57c06d84e3619e9856a8b4de1e to your computer and use it in GitHub Desktop.
Webpack with multiple entries
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const htmlPlugins = generateHtmlPlugins();
function generateHtmlPlugins() {
const templateFiles = glob.sync('../Pages/**/*.js');
return templateFiles.map(item => {
return new HtmlWebpackPlugin({
chunks: [item.replace('../Pages/', '').replace('.js', '')],
template: `${item.replace('.js', '')}.cshtml`,
filename: `${item.replace('../Pages/', '').replace('.js', '')}.cshtml`,
inject: true
});
});
}
module.exports = {
entry: glob.sync('../Pages/**/*.js').reduce((entries, entry) => Object.assign(entries, { [entry.replace('../Pages/', '').replace('.js', '')]: entry }), {}),
// './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{
test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
mode: 'development',
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin()
]
// We join our htmlPlugin array to the end
// of our webpack plugins array.
.concat(htmlPlugins)
};
//"scripts": {
// "watch": "set NODE_ENV=development&&webpack --progress --colors --watch",
// "deploy": "set NODE_ENV=production&&webpack -p"
//},
//<%= htmlWebpackPlugin.headTags %> broken <%= htmlWebpackPlugin.files.js.map(src => `<script type="text/javascript" src="${src}"></script>`).join("\r\n ") %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment