Webpack在瀏覽器中生成隨機字符

我想將webpack 3.3.5添加到我現有的AngularJS項目中。我遵循webpack網站上的說明https://webpack.js.org/guides/getting-started/#using-a-configuration。建立我的bundle.js的命令行工作得很好，文件看起來不錯。然而，當我嘗試打開瀏覽器中的index.html文件（Chrome和IE）我得到一個錯誤：Webpack在瀏覽器中生成隨機字符

「未捕獲的SyntaxError：無效的或意外的標記」

當我去查看錯誤位置在兩個和聲導入行下面的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>

來源

2017-08-28 ddelella

包括第在您的index.html爲UTF-8

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

瞭解更多關於此這裏： https://en.wikipedia.org/wiki/Byte_order_mark

來源

2017-08-28 16:22:19 mruanova

感謝您的解決方案，但這就引出另一個問題......這是爲什麼即使被添加的WebPack？它有什麼用途來要求用戶指定字符集？ – ddelella

Webpack在瀏覽器中生成隨機字符

回答

相關問題