2017-11-30 11 views
1

これはノックアウトを初めて使用したときです。私は、ノード、WebPACKの、およびES6でそれを使用していたが、何らかの理由で、私が作成していますバンドルは、ブラウザでエラーの原因となっている。Webpack出力のMimetypeエラー(ノックアウトを使用)

「、そのMIMEタイプ(text/'でhttp://localhost:8080/build/bundle.jsを」からスクリプトを実行することを拒否html ')が実行可能ではなく、厳密なMIMEタイプチェックが有効になっています。

私webpack.config.jsは次のとおりです。

const path = require('path') 


module.exports = { 
     output: { 
     path: path.resolve('build', './bundle.js'), 
     filename: 'bundle.js' 
     }, 
     module: { 
     loaders: [ 
     { 
      test: /\.html$/, loader: 'html' 
     }, 
      { 
      test: /\.js?$/, 
      exclude: /(node_modules)/, 
      loader: 'babel-loader', 

      }, 
     ] 
    } 
}; 

package.jsonファイルです:

{ 
    "name": "neighborhoodmap", 
    "version": "1.0.0", 
    "description": "Neighborhood Map App with API Calls", 
    "main": "app.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "node_modules/webpack-dev-server/bin/webpack-dev-server.js", 
    "build": "webpack" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "knockout": "^3.4.2" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "html-loader": "^0.5.1", 
    "imports-loader": "^0.7.1", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.5" 
    } 
} 

app.jsファイルは次のとおりです。

import ko from 'knockout'; 


class MyApp { 
    constructor() { 
    this.message = "Hello World"; 
    } 
} 

ko.applyBindings(new MyApp()) 

そして、実際のインデックス.htmlは:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Neighborhood Map</title> 
    </head> 
    <body> 
    <h1 data-bind="text: message"></h1> 

    <script type="text/javascript" src="build/bundle.js"></script> 
    </body> 
</html> 

バンドルとエラー依然として存在している私はWebPACKの-devのサーバーとアプリケーションを提供していますが、私はちょうどブラウザでindex.htmlをを配置しても:

「キャッチされないでSyntaxError:予期しないトークン<については、 build/bundle.js:1 "

バンドル出力のMIMEタイプを指定する方法はありますか?または、私のwebpack.config.jsが間違っていますか?どんな助けでも大歓迎です。

答えて

2

同じ問題を抱えている人のために、webpackがノックアウトビルドを解析するのを停止するモジュールプロパティの下にあるwebpack設定ファイルにnoParseを含めて解決しました。最終的なwebpackconfig.jsファイルは次のようになります:

const path = require('path'); 


module.exports = { 
    devtool: 'sourcemap', 
     entry: './app.js', 
     output: { 
     path: path.resolve('build', ''), 
     filename: 'bundle.js' 
     }, 
     module: { 
     noParse: /node_modules\/knockout\/build\/output\/*.js/, 
     loaders: [ 
     { 
      test: /\.html$/, loader: 'html' 
     }, 
      { 
      test: /\.js?$/, 
      exclude: /(node_modules)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      } 
      }, 
     ] 
    } 
}; 
関連する問題