Uncaught SyntaxError: неожиданный токен ‹в dist / index.html

Я использую webpack2 и реагирую на hot loader3 экспрессом. Я получаю сообщение об ошибке

Uncaught SyntaxError: неожиданный токен ‹в 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 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>

person Serenity    schedule 20.01.2017    source источник
comment
Возможный дубликат JS узла и неожиданного токена Webpack ‹   -  person stdob--    schedule 20.01.2017


Ответы (1)


Вы можете столкнуться с распространенной проблемой, которая появляется в сочетании с response-router и browser-history, когда URL-адреса скриптов в index.html не являются абсолютными.

Из-за относительного src сценария, если вы (или перезагрузите Webpack) случайно обновите браузер, когда ваша история находится на маршруте, браузер теперь попытается загрузить сценарии с URL-адреса вашего маршрута, например если маршрут /login и происходит перезагрузка / обновление, браузер запросит /login/manifest.<hash etc>.js, и ваш экспресс затем вернет его index.html, потому что там есть * обработчик маршрута :).

Исправление состоит в том, чтобы изменить src ваших скриптов в index.html на /manifest.<hash etc>.js, чтобы сделать его абсолютным. Это обеспечит их обслуживание статическим модулем.

Более подробная информация доступна в этом ответе - HtmlWebpackPlugin вводит файлы относительных путей, которые ломаются при загрузке некорневых путей к веб-сайтам.

person hazardous    schedule 20.01.2017
comment
вы хотите сказать ‹тип сценария = текст / javasctipt src = 1cd45e1ea00c59a34ecb.js› ‹/script›, но он будет создан htmlwebpackplugin внутри dist / index.html - person Serenity; 20.01.2017
comment
Для решения этой проблемы вы можете использовать output.publicPath = "/" в webpack.config.js. Подробнее: stackoverflow.com/questions/34620628/ - person hazardous; 20.01.2017
comment
Я должен использовать publicPath, как и в моем первом комментарии, верно? - person Serenity; 20.01.2017
comment
не изменится ли хэш при изменении файла, если я вручную включу его в src / index.html? - person Serenity; 20.01.2017
comment
При таком подходе вам не нужно прикасаться к htmlwebpackplugin, поэтому хеши и все будет работать должным образом. Плагин просто добавит значение publicPath к вставленным ссылкам скрипта. - person hazardous; 20.01.2017
comment
Давайте продолжим это обсуждение в чате. - person Serenity; 20.01.2017