webpack：'import' 不工作，而'require' 工作正常答案

【问题标题】：webpack: 'import' not working whereas 'require' works okaywebpack：'import' 不工作，而'require' 工作正常
【发布时间】：2016-10-16 10:22:41
【问题描述】：

我在使用 webpack 时遇到了一个奇怪的问题。

这是我的 webpack.config.js：

import webpack from "webpack";
import path from "path";

//not working: import ExtractTextPlugin from "extract-text-webpack-plugin";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const GLOBALS = {
    "process.env.NODE_ENV": JSON.stringify("production"),
    __DEV__: false
};

export default {
    debug: true,
    devtool: "source-map",
    noInfo: true,
    entry: "./src/bootstrap",
    target: "web",
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/",
        filename: "bundle.js"
    },
    resolve: {
        root: path.resolve(__dirname),
        alias: {
            "~": "src"
        },
        extensions: ["", ".js", ".jsx"]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.DefinePlugin(GLOBALS),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
        loaders: [
            { test: /\.jsx?$/, include: path.join(__dirname, "src"), loaders: ["babel"] },
            { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader: "file-loader?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: "file-loader?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: "file-loader?limit=10000&mimetype=image/svg+xml" },
            { test: /\.(jpe?g|png|gif)$/i, loaders: ["file"] },
            { test: /\.ico$/, loader: "file-loader?name=[name].[ext]" },
            {
                test: /(\.css|\.scss)$/,
                loader: ExtractTextPlugin.extract("css?sourceMap!sass?sourceMap")
            }
        ]
    }
};

如您所见：我设置了一个别名"~" 指向我的"src" 目录。

根据 webpack 文档，我应该可以通过这种方式导入模块：

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

提示：文件service-stub.js 位于此处：[__dirname]/src/utilities/service-stub.js。

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

当我使用require 而不是import 时，一切正常：

const { ServiceStub } = require("~/utilities/service-stub");

webpack.config.js 本身也存在同样的问题：

import webpack from "webpack";
import path from "path";

//not working: import ExtractTextPlugin from "extract-text-webpack-plugin";
const ExtractTextPlugin = require("extract-text-webpack-plugin");

这里有些模块可以很好地导入 import（模块 webpack 和 path），有些则不能（模块 extract-text-webpack-plugin）。

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

【问题讨论】：

第一个导入命名导出，第二个 - 解构需要的对象。所以它们是不等价的。
但是即使我写const ServiceStub = require("~/utilities/service-stub").ServiceStub;它也不起作用。
对于未显示的代码很难给出特别的建议。 service-stub.js 究竟是如何导出ServiceStub 的？
以这种方式导出：export { ServiceStub, ProcessingMode };。顺便说一句：如果我使用相对路径：import { ServiceStub } from "../../utilities/service-stub";，则导入适用于 ES6-import。但我想避免相对路径。
哦，对了，我看错了你的问题。任何机会import { ServiceStub } from "src/utilities/service-stub"; 工作正常吗？（我认为不应该）如果没有 - 尝试将 resolve: { modulesDirectories: ['node_modules', '.'], } 添加到 webpack 配置中

标签： javascript node.js ecmascript-6 webpack babeljs

【解决方案1】：

问题是 ESLint - 而不是 webpack。

当你像这样在 webpack 中使用别名时

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

你正在以这种方式导入

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

ESLint 无法解析别名并报错。

要让它工作，你必须用"import/no-unresolved": 0 告诉 ESLint 忽略某些规则。这似乎没问题，因为如果导入的文件实际上丢失了，webpack 会自己报告错误。

【讨论】：