Webpack 在浏览器中生成随机字符答案

【问题标题】：Webpack Generating Random Character in BrowserWebpack 在浏览器中生成随机字符
【发布时间】：2017-08-29 00:22:19
【问题描述】：

我正在尝试将 webpack 3.3.5 添加到我现有的 AngularJS 项目中。我正在遵循 webpack 网站 https://webpack.js.org/guides/getting-started/#using-a-configuration 上的说明。用于构建我的 bundle.js 的命令行运行良好，文件看起来不错。但是，当我尝试在浏览器（Chrome 和 IE）中打开 index.html 文件时出现错误：

“未捕获的语法错误：无效或意外令牌”

当我查看错误位置时，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>

【问题讨论】：

标签： angular webpack

【解决方案1】：

在 UTF-8 的 index.html 中包含此内容

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

在此处阅读有关此内容的更多信息： https://en.wikipedia.org/wiki/Byte_order_mark

【讨论】：

感谢您的解决方案，但这引出了另一个问题......为什么这甚至被 webpack 添加？它要求用户指定字符集的目的是什么？
哇！这花了我一段时间来解决这个问题，非常感谢。它是如此简单！其他搜索词（对我来说是错误的）：“SyntaxError: Unexpected character '┬┐' lodash webpack electron