Html-Webpack-Plugin Template: Module build failed: SyntaxError: Unexpected token

问题

When I try to build with html-webpack-plugin using index.ejs template file throws following error:

Even if I try to load as .html file or install the ejs-loader, still fails. I am not sure if ejs-loader is installing with html-webpack-plugin.

Some other people had the same issue but, their webpack version is @1 and the solution on that link did not worked for me.,

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

回答1:

You forgot to add a test property on your rule for the babel-loader, which means it's applied to all files and Babel doesn't handle HTML. Technically it interprets it as JSX, but <!DOCTYPE html> is not valid JSX, because a JavaScript identifier can't contain !.

As you already have a regular expression for .js(x) the rule should be (I also changed query to options, because query is deprecated, but still works):

{
  test: JS_JSX_PATTERN,
  exclude: /node_modules/,
  loader: "babel-loader",
  options: {
    presets: ["react", "es2015", "stage-1"]
  }
},

来源：https://stackoverflow.com/questions/45351475/html-webpack-plugin-template-module-build-failed-syntaxerror-unexpected-token

标签

Webpack

html-webpack-plugin