我是第一次设置webpack。
目前我有以下webpack.config.js
:
'use strict';
let path = require('path');
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:8080',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
'./index.js'
// the entry point of our app
],
output: {
filename: 'bundle.js',
// the output bundle
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
// necessary for HMR to know where to load the hot update chunks
},
devtool: 'inline-source-map',
devServer: {
hot: true,
// enable HMR on the server
contentBase: path.resolve(__dirname, 'dist'),
// match the output path
publicPath: '/'
// match the output `publicPath`
},
watch: true,
module: {
rules: [
{
test: /\.jsx?$/,
use: [ 'babel-loader', ],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader?modules', ],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
new HtmlWebpackPlugin({
minify: {
collapseWhitespace: true
},
hash: true,
template: './views/index.ejs'
})
]
};
当我运行webpack-dev-server
时,我收到以下错误:
Child html-webpack-plugin for "index.html":
chunk {0} index.html 921 bytes [entry] [rendered]
[./node_modules/html-webpack-plugin/lib/loader.js!./views/index.ejs] ./~/html-webpack-plugin/lib/loader.js!./views/index.ejs 921 bytes {0} [built] [failed] [1 error]
ERROR in ./~/html-webpack-plugin/lib/loader.js!./views/index.ejs
Module build failed: SyntaxError: Unexpected identifier
at Function (native)
at /var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:14843:16
at apply (/var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:494:27)
at /var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:15227:16
at apply (/var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:496:27)
at /var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:6600:16
at Function.template (/var/www/monitor/node_modules/html-webpack-plugin/node_modules/lodash/lodash.js:14842:20)
at Object.module.exports (/var/www/monitor/node_modules/html-webpack-plugin/lib/loader.js:32:20)
我正在使用这些版本的库:
"html-webpack-plugin": "^2.28.0",
"lodash": "^4.17.4"
为什么我会遇到lodash库的问题?任何提示赞赏。
更新:我已经包含了index.ejs文件
index.ejs:
<!DOCTYPE html>
<html lang="en">
<% include head %>
<body>
<div id="navbar-app"></div>
<p> Welcome, more coming soon! </p>
</body>
<% include footer %>
<% include manditory_scripts %>
<!-- insert component scripts below here -->
<script src="dist/js/NavBarMain.js"></script>
</html>