Question

我刚刚更新了我的Angular 2项目，以便与Webpack 2一起工作。但是，我在使用resolve: { alias: {...} }密钥时遇到了新问题。

当我使用webpack 1时，这段代码运行良好：

webpack.config.js

    resolve: {
    // http://webpack.github.io/docs/configuration.html#resolve-extensions
    extensions: ['.ts', '.js', '.json', '.css', '.html'],
    alias: {
        "orion/editor/edit": "http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js"
    }
},

角度分量：

ngOnInit() {
    Promise.all([
        require('http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js'),
        require('http://eclipse.org/orion/editor/releases/current/built-editor.css')
    ]).then(function () {
        requirejs(['orion/editor/edit'], function (edit: any) {
            this.orionEditor = edit({className: 'editor', parent: 'xml'})[0];
            this.receiveXmlData();
        }.bind(this));
    }.bind(this));
}

现在使用webpack 2时，我总是会收到一个错误，即两个文件都无法解析。有没有人有想法？

找不到模块：错误：无法解决＆＃39; http://eclipse.org/orion/editor/releases/current/built-editor.css＆＃39;在[Angular-component file]中

找不到模块：错误：无法解决＆＃39; http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js＆＃39; in＆＃39; C：\ Applications \ winery \ enpro-winery \ org.eclipse.winery.ui \ src \ app \ instance \ editXML＆＃39;

我的尝试到现在为止：

webpack.common.js 中的

对于webpack2我尝试过：

    const path = require('path');

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.html'],
        alias: {
            "orion/editor/edit": path.resolve("http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js")
    }

和

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.html'],
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
            path.resolve("http://www.eclipse.org/orion/editor/releases/current/built-editor.min.js"),
            path.resolve("http://eclipse.org/orion/editor/releases/current/built-editor.css")
    ]
},

Answer 1

实际上，我找到了解决方案：我不小心从package.json中删除了resolve-url-loader依赖项。

我进一步发现，我甚至不需要在解析对象中包含alias或path.resolve。

Answer 2

更改 webpack.common.js 文件中的配置，如下所示。

 module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'file-loader?name=[name].json'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader']
            },

        ]
    },


 plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),
]

使用URL时找不到Webpack 2模块

2 个答案: