的WebPack 2反应代码分裂

我试图分裂的路线反应代码，但我收到此错误：Uncaught SyntaxError: Unexpected token <的WebPack 2反应代码分裂

这里是我的WebPack代码：

var path = require('path') 
var webpack = require('webpack') 
var HappyPack = require('happypack') 
var BundleTracker = require('webpack-bundle-tracker') 
var path = require('path') 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 
var polyfill = require("babel-polyfill") 

function _path(p) { 
    return path.join(__dirname, p); 
} 

module.exports = { 

    context: __dirname, 
    entry: { 
     index: './assets/js/index', 
    }, 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name]-[hash].js' 
    }, 

    devtool: 'inline-eval-cheap-source-map', 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }), 
     new HappyPack({ 
      threads: 4, 
      loaders: [ 'babel-loader' ], 
     }), 
     new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /pt-br/) 
    ], 

    module: { 
     rules: [ 

      { 
       test: /\.css$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader"]}) 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]}) 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/vendors/'), 
       use: ["style-loader", "css-loader", "resolve-url-loader", "sass-loader"] 
       // use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: ["css-loader", "resolve-url-loader", "sass-loader"]}) 
      }, 

      { 
       test: /\.jsx?$/, 
       include: path.resolve(__dirname, './assets/js/'), 
       exclude: /node_modules/, 
       use: [{ 
        loader: 'happypack/loader', 
       }] 
      }, 
      { 
       test: /\.png$/, 
       use: { 
         loader: 'file-loader' , 
         options: { 
          name: '/static/img/[name].[ext]' 
         } 
        } 

      } 
     ] 
    }, 

    resolve: { 
     extensions: ['.js', '.jsx'], 
     modules: [ path.resolve(__dirname, 'node_modules')] 
    } 
}

我babelrc代码：

{ 
    "presets": [ 
       ["es2015", {modules: false}], 
       "react" 
      ] 
}

而且我的路由器：

我在后端使用django，并且webpack-bundle-tracker不支持webpack代码拆分。

所以我创建一个问题，并做了一个解决方案（或解决方法）：如果我使用的是进口

{% load render_bundle from webpack_loader %} 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no" /> 
    <title>title</title> 
    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png"> 
    {% render_bundle 'index' 'css' %} 
    </head> 

    <body> 
    <div id ="app" class="app"></div> 
    <audio id="audio_sip" autoplay="autoplay"></audio> 
    {% render_bundle 'index' 'js' %} 
    {% render_bundle 'split' 'js' %} 
    </body> 
</html>

所以我不知道： https://github.com/owais/webpack-bundle-tracker/issues/19

我的index.html是正确地在反应路由器或问题可以与django有关。

任何人都可以帮我吗？

在此先感谢。

来源

2017-01-16 Alessander França

如果您正在讲述应用程序路由，那么}> –

我没有看到某个地方有结束标记。 – AKS

- 该是为应用程序 - 应用程序有很多孩子 –

这可能是在生成的index.html中自动插入的脚本引用中没有绝对路径的副作用。例如。如果生成的脚本语句是<script src="./index.js"></script>，那么当您在子路由上说/contacts并且有刷新时，浏览器将请求/contacts/index.js。如果您的服务器发回index.html，那么浏览器将尝试解析HTML为JS失败，并会抱怨无效的<字符。

要验证这一点，请硬编码index.html文件中的绝对引用，例如 - <script src="/index.js"></script>，然后刷新以检查问题是否仍然存在。

如果确实如此，请阅读如何修改index.html模板以插入绝对路径，因为我担心我不熟悉您使用的模板语法。

应该工作的一个修复方法是在您的webpack.config.js文件中配置output.publicPath = "/"配置。这应该使脚本路径绝对。

类似的问题是Issue using nested routes in React-Router with webpack。

来源

2017-01-19 06:53:00 hazardous

谢谢！我将publicPath设置为“/ static/bundle /”文件的路径 –

通常，“<”上的错误是它无法解析的指示符。这意味着babel + react配置文件可能没有运行。当你看你的webpack配置时，babel只能在jsx上运行。既然你没有添加那个扩展，当你懒惰的时候它不会通过那个加载器运行。您可以更改正则表达式以通过babel运行所有js文件（排除节点），也可以在导入文件时明确添加.jsx扩展名。

来源

2017-01-16 16:33:54

我做了这两件事：更改正则表达式测试：/ \。（js | jsx）$ /，并在导入文件中添加.jsx。我仍然有错误，但我的应用程序不会中断 –

你现在有什么错误？ –

相同：未捕获的SyntaxError：意外的令牌<有时分页符有时不会中断 –

的WebPack 2反应代码分裂

回答

相关问题