Question

当我尝试使用index.ejs模板文件构建html-webpack-plugin时会抛出以下错误：

即使我尝试加载.html文件或安装ejs-loader，仍然会失败。我不确定ejs-loader是否使用html-webpack-plugin安装。

其他一些人也有同样的问题，但他们的webpack版本是@ 1，该链接上的解决方案对我没用。

https://github.com/jantimon/html-webpack-plugin/issues/273

错误   ./node_modules/html-webpack-plugin/lib/loader.js！./ SRC / index.ejs

模块构建失败：SyntaxError：意外的令牌（1：1）

的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依赖项：

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

Answer 1

您忘记在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"]
  }
},

Html-Webpack-Plugin Template：模块构建失败：SyntaxError：意外的令牌

1 个答案: