When using this plugin, the generated output has a string with a path to the temporary filename and the injected tags but it doesn't have any of the HTML from my template.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<% newrelic && newrelic.getBrowserTimingHeader() %>
<title><%= title %></title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">
</head>
<body style="margin:0px;">
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="root">
<div class="splash ncss-brand">
<div class="message">CMS</div>
<div class="spinner"></div>
</div>
</div>
</body>
</html>
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ENV = process.argv.indexOf('-p') !== -1 ? 'production' : process.env.NODE_ENV || 'development';
const isHosted = (ENV === 'production');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
main: [
require.resolve('./polyfills'),
path.resolve('./src/index'),
],
},
output: {
path: path.join(__dirname, 'dist'),
// Long-term bundle caching is achieved with content-based hashing policy using chunkhash
filename: '[name].[chunkhash].js',
publicPath: '/iris/',
// Point sourcemap entries to original disk location
devtoolModuleFilenameTemplate: info => path.resolve(info.absoluteResourcePath),
},
module: {
rules: [
// First, run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
},
loader: require.resolve('eslint-loader'),
},
],
include: path.resolve('./src'),
},
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you must add its `test`
// as a new entry in the `exclude` list for "file" loader.
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'public/[name].[hash:8].[ext]',
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'public/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: path.resolve('./src'),
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
],
},
plugins: [
new webpack.DefinePlugin({
// Make process.env.NODE_ENV available to source code during webpack bundling
'process.env': {
NODE_ENV: JSON.stringify(ENV),
},
}),
new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true }),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
// Grab all vendor imports in the node_modules directory
minChunks: module => module.context && module.context.indexOf('node_modules') !== -1,
}),
// Extract all the common modules from vendor and main bundles
// Since there are no more common modules between them we end up with just the
// runtime code included in the manifest file. This allows the filename to remain unchanged
// so that the browser can cache the files, even between deploys!
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
}),
new HtmlWebpackPlugin({
inject: true,
// cache: true,
filename: 'index.ejs',
template: 'src/home.ejs',
alwaysWriteToDisk: true,
minify: {
removeComments: true,
collapseWhitespace: isHosted,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: isHosted,
minifyCSS: isHosted,
minifyURLs: isHosted,
},
}),
new HtmlWebpackHarddiskPlugin({
outputPath: path.resolve(__dirname, 'views'),
}),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),
// If you require a missing module and then `npm install` it, you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(path.join(__dirname, 'node_modules')),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
resolve: {
modules: [
'node_modules',
path.resolve('./node_modules'),
],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
},
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
extensions: ['.js', '.jsx', '.json'],
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(path.resolve('./src')),
],
},
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
};
I've tried just about every combination of options and can't seem to produce the actual HTML from the template with the injected scripts into views/index.ejs.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent