webpack: 'import' funktioniert nicht, während 'require' funktioniert ok

Question

Ich habe ein seltsames Problem mit dem webpack.

Das ist mein 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") 
      } 
     ] 
    } 
}; 

Wie Sie sehen können: set ich "~" einen Alias ​​oben zeigend auf mein "src" Verzeichnis.

Nach webpack Dokumentation sollte ich in der Lage sein Module auf diese Weise zu importieren:

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

HINWEIS: Die Datei service-stub.js sitzt hier: [__dirname]/src/utilities/service-stub.js.

Dies funktioniert jedoch nicht, da Webpack einen Fehler meldet ("Pfad nicht gefunden.").

Wenn ich require anstelle von import, funktioniert alles einwandfrei:

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

Das gleiche Problem in webpack.config.js selbst:

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

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

Hier einige Module zu importieren und mit import (Module webpack und path), einige nicht (Modul extract-text-webpack-plugin).

Ich arbeitete durch Dutzende von Foren, aber noch keine Lösung gefunden.

Answer 1

Das Problem ist ESLint - nicht Webpack.

Wenn Sie Aliase in webpack wie diese

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

und Sie importieren diese Weise

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

ESLint nicht auflösen kann den Alias ​​und meldet einen Fehler verwenden.

Um es funktionieren zu lassen, müssen Sie ESLint anweisen, eine Regel mit "import/no-unresolved": 0 zu ignorieren. Dies scheint in Ordnung zu sein, denn wenn eine importierte Datei tatsächlich fehlt, meldet Webpack selbst einen Fehler.