个人中心
gpt4 book ai didi

webpack - Html-Webpack-Plugin 模板 : Module build failed: SyntaxError: Unexpected token

转载 作者：行者123 更新时间：2023-12-01 13:32:13 28 4
gpt4 key购买 nike

当我尝试使用 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/

28 4 0
文章推荐： powershell - -s 在 powershell 中使用 Start-Job 时
文章推荐： java - 需要帮助修复错误。线程 "main"java.util.InputMismatchException 中出现异常
文章推荐： java - 找到一个非常大的数字
文章推荐： java - Minecraft Forge 如何从外部 JAR 加载模组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com