的HTML的WebPack-插件模板：模块构建失败：语法错误：意外的令牌

当我尝试建立与HTML-的WebPack-插件使用index.ejs模板文件会引发以下错误：的HTML的WebPack-插件模板：模块构建失败：语法错误：意外的令牌

即使我尝试加载作为.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

SRC /index.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.co nfig.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 depencies：

"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" 
    }

来源

2017-07-27 arikanmstf

你得到任何更多的信息，如果你把错误记录在插件？新HtmlWebpackPlugin（{ 模板： 'SRC/index.ejs'， showErrors：真 }） – 83N

相同：BabelLoaderError：语法错误：意外的标记（1：1） – arikanmstf

我有点生疏的WebPack配置，但我认为发生了什么事是你的模板被捆绑到一个babel-loader无法解析的JS文件中。如果您在HtmlWebpackPlugin中指定了html文件名，是否会得到完全相同的错误？（例如，新的HtmlWebpackPlugin（{模板：'src/index.ejs'，文件名：'Index_Generated.html' }） – 83N

你忘了你的规则来进行babel-loader，这意味着它适用于所有文件和巴贝尔不处理加test属性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"] 
    } 
},

来源

2017-07-27 15:22:37

的HTML的WebPack-插件模板：模块构建失败：语法错误：意外的令牌

回答

相关问题