Question

我正在使用webpack2并使用express对hot loader3做出反应。我收到错误

未捕获的SyntaxError：意外的令牌＆lt;在dist / index.html

这是我的配置文件

webpack.config.js

const isDevelopment = process.argv.indexOf('--development') !== -1;

const VENDOR_LIBS = [
    'react', 'react-dom', 'redux', 'react-redux',
    'react-router', 'react-router-redux', 'lodash',
    'express',
];

const entryPath = path.join(__dirname, 'src/index.js');

const config = {
  entry: {
    bundle: isDevelopment ? [
                            'webpack-hot-middleware/client?reload=true',
                            'react-hot-loader/patch',
                            entryPath
                          ] : entryPath,
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: isDevelopment ? '[name].js' : '[name].[chunkhash].js',
  },
  module: {
    rules: [
      {
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader'
        }),
        test: /\.css$/,
      },
      {
        use: ['babel-loader'],
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        use: [
          {
            loader: 'url-loader',
            options: { limit: 40000 }
          },
          'image-webpack-loader'
        ],
        test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|otf|ttf)$/,
      },
    ],
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  plugins: [
    new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify('production')
    }),
    new HtmlWebpackPlugin({
      inject: true,
      template: 'src/index.html',
      minify: {
        removeComments: false,
        collapseWhitespace: false,
      }
    }),
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
  ],
};
isDevelopment && config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false,
            screw_ie8: true
          },
        })
    );
module.exports = config;

server.js

const isDevelopment = process.argv.indexOf('--development') !== -1;

if (isDevelopment) {

  const webpack = require('webpack');
  const webpackConfig = require('./webpack.config');

  const compiler = webpack(webpackConfig);

  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    hot: true,
    stats: {
      colors: true
    }
  }));

  app.use(require('webpack-hot-middleware')(compiler));

} else {

  app.use(express.static(__dirname + '/src/assets/'));
}

app.get('*', function (request, response) {

  response.sendFile(__dirname + '/dist/index.html');
});

app.listen(port);

console.log(`server started on port: ${port}`);

的package.json

"scripts": {
    "pre-start": "webpack",
    "start-dev": "node server.js --development",
    "start-prod": "rimraf dist && webpack && node server.js --production"
  },
  "dependencies": {
    "express": "^4.14.0",
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "reselect": "^2.5.4"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.17.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.4",
    "html-webpack-plugin": "^2.26.0",
    "image-webpack-loader": "^3.1.0",
    "react-hot-loader": "next",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "webpack": "beta",
    "webpack-dev-middleware": "^1.9.0",
    "webpack-dev-server": "beta",
    "webpack-hot-middleware": "^2.15.0"
  }
}

以下是控制台

中显示的错误的屏幕截图

导致此错误的原因是什么？是htmlWebpackPlugin还是extract-text-webpack-plugin的问题？

更新使用publicPath和manifest.hash.js我的index.html of dist将是

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Pogimon</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="manifest.79b84dc7d02a392424d5.js"></script>
    <script type="text/javascript" src="/manifest.6dcd342a4568f6b57de6.js"></script><script type="text/javascript" src="/vendor.a79b5bc95a09216321bd.js"></script><script type="text/javascript" src="/bundle.d03400470aaca7bf8a0d.js"></script></body>
</html>

Answer 1

当index.html中的脚本网址不是绝对的时，您可能遇到一个常见问题，它出现在react-router和browser-history的组合中。

由于相对脚本src，如果您（或Webpack重新加载）恰好在历史记录在路线上时刷新浏览器，浏览器现在将尝试从路径的URL加载脚本，例如如果路由是/login并且重新加载/刷新，浏览器将要求/login/manifest.<hash etc>.js，然后您的快递将返回index.html，因为那里有一个*路由处理程序:)。

修复方法是将index.html中的脚本src更改为/manifest.<hash etc>.js以使其绝对。这将确保它们由静态模块提供服务。

此答案中提供了更多详细信息 - HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths。

未捕获的SyntaxError：意外的令牌＆lt; in dist / index.html

1 个答案: