当我尝试使用 index.ejs 模板文件使用 html-webpack-plugin 构建时，会引发以下错误:
即使我尝试加载为 .html 文件或安装 ejs-loader，仍然失败。我不确定 ejs-loader 是否使用 html-webpack-plugin 安装。
其他一些人也有同样的问题，但是，他们的 webpack 版本是 @1 并且该链接上的解决方案对我不起作用。，
https://github.com/jantimon/html-webpack-plugin/issues/273
ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs
Module build failed: SyntaxError: Unexpected token (1:1)
Error image
源代码/索引.ejs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<title>My Library</title>
</head>
<body>
<div class="main-content"></div>
<footer class="footer-container"><p><span>Source: </span><a href="https://github.com/arikanmstf/mylibrary">https://github.com/arikanmstf/mylibrary</a></p></footer>
</body>
</html>
webpack.config.js:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
const webpack = require("webpack");
const argv = require("yargs").argv;
const path = require("path");
const extractCSS = new ExtractTextPlugin("dist/style.css");
const JS_JSX_PATTERN = /\.jsx?$/;
const SCSS_PATTERN = /\.scss$/;
const ASSET_PATTERN = /\.(jpe?g|png|gif|svg|ttf|otf|eot|woff(2)?)(\?v=\d+)?$/;
const DEV_SERVER_PORT = 8080;
const configResolve = require.resolve("./src/config/" + argv.env + ".js");
const config = require("./src/config/" + argv.env + ".js");
const isProd = argv.env === 'prod';
const isDev = argv.env === 'dev';
let plugins = [extractCSS];
let rules = [
{
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-1"]
}
},
{
test: SCSS_PATTERN,
use: extractCSS.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: { minimize: isProd }
},
"sass-loader"
]
})
}
];
if (isProd) {
plugins.push(
new UglifyJSPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
);
}
plugins.push(
new HtmlWebpackPlugin({
template: 'src/index.ejs'
})
);
rules.push({
test: JS_JSX_PATTERN,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: isProd,
quiet: isProd
}
});
rules.push({
test: ASSET_PATTERN,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: 'dist/[path][name].[ext]?[hash]',
context: 'assets'
}
});
module.exports = {
entry: [
"./src/scripts/index.jsx",
"./src/style/index.scss"
],
output: {
path: __dirname,
publicPath: config.homeUrl,
filename: "dist/bundle.js"
},
module: {
rules: rules
},
resolve: {
extensions: [".js", ".jsx"],
modules: [
path.resolve(__dirname, './src/scripts'),
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, './assets')
],
alias: {
config$: configResolve
}
},
devServer: {
port: DEV_SERVER_PORT,
historyApiFallback: true,
contentBase: "./"
},
plugins: plugins
};
package.json 依赖项:
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "7.2.3",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.4",
"eslint": "3.19.0",
"eslint-config-airbnb": "15.0.1",
"eslint-loader": "1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "5.0.3",
"eslint-plugin-react": "7.0.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"node-sass": "^4.5.3",
"react-router-dom": "^4.1.1",
"sass-loader": "^6.0.5",
"style-loader": "^0.18.1",
"uglifyjs-webpack-plugin": "^0.4.3",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.6.1",
"yargs": "^8.0.1"
},
"dependencies": {
"axios": "^0.16.1",
"babel-preset-stage-1": "^6.1.18",
"prop-types": "^15.5.10",
"qs": "^6.4.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-dropzone": "^3.13.3",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"redux": "^3.6.0",
"redux-thunk": "^2.2.0"
}
最佳答案
您忘记为 test 规则添加 babel-loader 属性，这意味着它适用于所有文件，而 Babel 不处理 HTML。从技术上讲，它会将其解释为 JSX，但 <!DOCTYPE html> 不是有效的 JSX，因为 JavaScript 标识符不能包含 ! 。
由于您已经有 .js(x) 的正则表达式，规则应该是(我也将 query 更改为 options ，因为 query is deprecated ，但仍然有效):
{
test: JS_JSX_PATTERN,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["react", "es2015", "stage-1"]
}
},
关于webpack - Html-Webpack-Plugin 模板 : Module build failed: SyntaxError: Unexpected token，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45351475/