2017-08-28 3 views
1

webpack 3.3.5を既存のAngularJSプロジェクトに追加しようとしています。私はウェブパックのウェブサイトの指示に従っていますhttps://webpack.js.org/guides/getting-started/#using-a-configuration。私のbundle.jsをビルドするためのコマンドラインは正常に動作していて、ファイルはうまく見えます。私はブラウザ(ChromeとIE)でindex.htmlファイルを開こうとするしかし、私はエラーを取得する:Webpackブラウザでランダムな文字を生成する

「キャッチされないでSyntaxError:無効または予期しないトークン」

私は、エラーの場所を表示するために行くとき2つのハーモニーインポート行の下のJavaScriptファイルにランダムな文字が表示されます。

"use strict"; 
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash__ = __webpack_require__(1); 
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_lodash__); 
 

function component() { 
    var element = document.createElement('div'); 
    element.innerHTML = __WEBPACK_IMPORTED_MODULE_0_lodash___default.a.join(['Hello', 'webpack'], ' '); 
    return element; 
} 

Visual Studioで実際のbundle.jsファイルを開くと、これらの文字は表示されません。

"use strict"; 
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); 
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash__ = __webpack_require__(1); 
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_lodash___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_lodash__); 
 

function component() { 
    var element = document.createElement('div'); 
    element.innerHTML = __WEBPACK_IMPORTED_MODULE_0_lodash___default.a.join(['Hello', 'webpack'], ' '); 
    return element; 
} 

誰でも手助けできますか?ここに私のファイルがあります。

のsrc/index.js

import _ from 'lodash'; 

function component() { 
    var element = document.createElement('div'); 
    element.innerHTML = _.join(['Hello', 'webpack'], ' '); 
    return element; 
} 

document.body.appendChild(component()); 

のsrc/webpack.config.js

const path = require('path'); 

module.exports = { 
    entry: './src/index.js', 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, 'dist') 
    } 
}; 

DIST/index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <title>Getting Started</title> 
</head> 
<body> 
    <script src="bundle.js"></script> 
</body> 
</html> 

答えて

1

番目を含めますUTF-8のためのあなたのindex.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

ここでこれについての詳細を読むです:解決のための https://en.wikipedia.org/wiki/Byte_order_mark

+0

感謝しますが、これは、これはさえのWebPACKによって追加されている理由別の質問を...頼みますか?ユーザが文字セットを指定することをサーバに要求する目的は何ですか? – ddelella

関連する問題