Question

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

＆＃34;未捕获的SyntaxError：无效或意外的令牌＆＃34;

当我去查看错误位置时，两个和声导入行下面的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>

Answer 1

将此内容包含在index.html中以获取UTF-8

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

在这里阅读更多相关信息： https://en.wikipedia.org/wiki/Byte_order_mark

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

1 个答案: