Created
March 13, 2020 09:39
-
-
Save bytrangle/60b18e477087a97c6cd3bc4117ea7c75 to your computer and use it in GitHub Desktop.
Make html-webpakc-plugin use an .ejs template file, and output an index.html.ejs file. Great for templating.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- This file is located at src/template.ejs --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title><%= htmlWebpackPlugin.options.title %></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| </head> | |
| <body> | |
| <!-- output a literal <% tag --> | |
| <%%- include() %> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| mode: 'development', | |
| entry: path.resolve(__dirname, 'static/index.js'), | |
| output: { | |
| filename: 'js/[name].js', | |
| path: path.resolve(__dirname, 'dist'), | |
| }, | |
| optimization: { | |
| runtimeChunk: 'single', | |
| // usedExports: true, | |
| // namedModules: true, | |
| // namedChunks: true, | |
| splitChunks: { | |
| chunks: 'all', | |
| maxInitialRequests: Infinity, | |
| minSize: 0, | |
| cacheGroups: { | |
| vendor: { | |
| test: /[\\/]node_modules[\\/]/, | |
| name(module) { | |
| const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; | |
| return `${packageName.replace('@', '')}`; | |
| }, | |
| reuseExistingChunk: true, | |
| }, | |
| }, | |
| }, | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.css$/, | |
| use: [MiniCssExtractPlugin.loader, 'css-loader'], | |
| }, | |
| ], | |
| }, | |
| plugins: [ | |
| new MiniCssExtractPlugin({ | |
| filename: 'css/[name].css', | |
| }), | |
| new HtmlWebpackPlugin({ | |
| title: 'Ejs Template', | |
| template: '!!raw-loader!" + path.join(__dirname, "src/template.ejs', | |
| filename: 'index.html.ejs' | |
| }), | |
| new BundleAnalyzerPlugin(), | |
| ], | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment