javascript - 尝试使用 Webpack 链接文件

Question

我想将一个大项目重新编译成 webpack。我将小的 ES6 代码从文件中分离出来，并将其放在另一个文件中。我运行了 webpack 一切正常，没有错误。但在浏览器中，这个被切断的功能不起作用，显示console.error类型

unexpected string on the first line and on the first line this code is imported "./lang"

连接另一个模块的代码。请问这个问题是什么原因造成的，请帮忙。

这是我的webpack，带有简单的配置webpack.config.js

const path = require("path");

const config = {
    entry: "./common.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename:"bundle.js"
    }
};

module.exports = config;

如果有人需要这个，那就是 common.js 正如我所说，问题出在第一行

import "./lang";

$('#select-country').selectize();

// --------------------------form open
$(".room-guests-count").click(function(e){
    $(".form-open").toggle();
    e.stopPropagation();
});
$('.form-open').click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $('.form-open').hide();
});
// ---------------------language bar
$('.language').each(function () {
  $(this).find('> .select').on('click', function () {
    $(this).next().slideToggle();
  });
  $(this).find('.option').on('click', function () {
    $('.language > .select').html($(this).html()).next().slideUp();
  });
});

Answer 1

Webpack 是一个 bundler 。它将所有导入内容捆绑在一个文件中，因此您无需包含原始文件。从页面中删除 common.js。

顺便说一句，错误的原因是即使在支持模块的浏览器中，脚本标记也必须设置 type="module" 才能正确解析 JavaScript。