的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反應代碼分裂

回答

相關問題