Javascript 网页：'；导入&x27；不工作，而'；要求'；行吗

我在使用网页包时遇到了一个奇怪的问题

这是我的webpack.config.js：

从“webpack”导入webpack；
从“路径”导入路径；
//不工作：从“提取文本网页包插件”导入提取文本插件；
const ExtractTextPlugin=require（“提取文本网页包插件”）；
常量全局={
“process.env.NODE_env”：JSON.stringify（“生产”），
__戴夫：错
};
导出默认值{
是的，
devtool：“源地图”，
没错，
条目：“./src/bootstrap”，
目标：“网络”，
输出：{
path:path.join（uu dirname，“dist”），
公共路径：“/”，
文件名：“bundle.js”
},
决心：{
root:path.resolve（_dirname），
别名：{
“~”：“src”
},
扩展名：[“”，.js“，.jsx”]
},
插件：[
新建webpack.optimize.OccurenceOrderPlugin（），
新网页包。定义插件（全局），
新的ExtractTextPlugin（“style.css”），
新建网页包.optimize.dedueplugin（），
新建webpack.optimize.UglifyJsPlugin（）
],
模块：{
装载机：[
{test:/\.jsx？$/，包括：path.join（\uu dirname，“src”），加载程序：[“babel”]}，
{test://\.eot（\？v=\d+。\d+。\d+）？$/，加载程序：“文件”}，
{test://\（woff | woff2）$/，加载程序：“文件加载程序？前缀=font/&limit=5000”}，
{test://\.ttf（\？v=\d+。\d+。\d+）？$/，加载器：“文件加载器？限制=10000&mimetype=application/octet stream”}，
{test://\.svg（\？v=\d+。\d+。\d+？$/，加载程序：“文件加载程序？限制=10000&mimetype=image/svg+xml”}，
{test://\（jpe？g | png | gif）$/i，加载程序：[“文件”]}，
{test:/\.ico$/，loader:“文件加载器？名称=[name]。[ext]”}，
{
测试：/（\.css\.scss）$/，
加载器：ExtractTextPlugin.extract（“css？sourceMap！sass？sourceMap”）
}
]
}
};

如您所见：我设置了一个别名

“~”

，指向我的

“src”

目录

根据webpack文档，我应该能够通过以下方式导入模块：

从“~/utilities/service stub”导入{ServiceStub}”；

提示：文件

service stub.js

位于此处：

[\uu dirname]/src/utilities/service stub.js

但是，这不起作用，因为webpack正在抛出错误（“未找到路径”）

当我使用

require

而不是

import

时，一切正常：

const{ServiceStub}=require（“~/utilities/ServiceStub”）；

webpack.config.js

本身也存在同样的问题：

从“webpack”导入webpack；
从“路径”导入路径；
//不工作：从“提取文本网页包插件”导入提取文本插件；
const ExtractTextPlugin=require（“提取文本网页包插件”）；

在这里，有些模块可以通过

import

（模块

webpack

和

path

）很好地导入，有些则不能（模块

提取文本webpack插件

）

---

我浏览了几十个论坛，但还没有找到解决方案。

问题在于ESLint，而不是webpack

当你像这样在网页包中使用别名时

resolve: {
    root: path.resolve(__dirname),
    alias: {
        "~": "src"
    },
    extensions: ["", ".js", ".jsx"]
}

你是这样导入的

import { ServiceStub } from "~/services/service-stub";

ESLint无法解析别名并报告错误

---

若要使其正常工作，您必须告诉ESLint忽略一些规则

“导入/无未解析”：0

。这似乎没问题，因为如果导入的文件确实丢失，webpack会报告错误本身。

问题是ESLint，而不是webpack

当你像这样在网页包中使用别名时

resolve: {
    root: path.resolve(__dirname),
    alias: {
        "~": "src"
    },
    extensions: ["", ".js", ".jsx"]
}

你是这样导入的

import { ServiceStub } from "~/services/service-stub";

ESLint无法解析别名并报告错误

---

若要使其正常工作，您必须告诉ESLint忽略一些规则

“导入/无未解析”：0

。这似乎没问题，因为如果导入的文件确实丢失了，webpack本身会报告一个错误。

第一个导入命名的导出，第二个则是destructures required'd对象。所以它们不是等价的它不起作用。很难对未显示的代码给出具体建议。

service stub.js如何准确导出
ServiceStub
？导出方式如下：
export{ServiceStub，ProcessingMode}。顺便说一句：如果我使用相对路径，
import{ServiceStub}从“./../utilities/service stub”导入，
import可以与ES6一起正常工作。但我想避免相对路径。哦，对了，我误解了你的问题。任何机会
从“src/utilities/service stub”导入{ServiceStub}工作正常吗？（我认为它不应该）如果它不-尝试添加
resolve:{modulesDirectories:['node_modules'，'.]，}
到Web包配置第一个导入命名的导出，第二个-解构所需的对象。所以它们不是等价的它不起作用。很难对未显示的代码给出具体建议。
service stub.js如何准确导出
ServiceStub
？导出方式如下：
export{ServiceStub，ProcessingMode}。顺便说一句：如果我使用相对路径，
import{ServiceStub}从“./../utilities/service stub”导入，
import可以与ES6一起正常工作。但我想避免相对路径。哦，对了，我误解了你的问题。任何机会
从“src/utilities/service stub”导入{ServiceStub}工作正常吗？（我认为它不应该）如果它没有-尝试将
resolve:{modulesDirectories:['node_modules'，'.]，}
添加到网页包配置中