javascript - 如何修复 webpack 配置中最新 raw-loader 版本的不工作？

Question

在我的 Angular 项目中，如果我们使用 raw-loader@1.0.0，则该应用程序正在编译并且工作正常。而如果我们使用 2.0.0 版本，应用程序将无法运行。版本 1.0.0 和 2.0.0 之间有什么区别？

webpack.config.ts

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.ts',
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader', 'angular2-template-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.(html|css)$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new webpack.DefinePlugin({
            config: JSON.stringify({
                apiUrl: 'http://localhost:9999'
            })
        })
    ],
    devServer: {
        historyApiFallback: true
    }
};

Answer 1

根据他们的发布页面 2.0.0 进行了重大更改“使用 ES 模块导出而不是 CommonJS”(https://github.com/webpack-contrib/raw-loader/releases)，因此根据您的项目设置(使用 commonJS 模块而不是 ES 模块)，这可能会导致您的问题.

使用 CommonJS 模块如下所示:

const myModule = require('../path/to/module/my-module.js');

使用新的 ES 模块标准看起来像这样:

import {MyModule} from '../path/to/module/my-module.js';

如果您的代码使用第一个示例中的导入，那么 2.0.0 版的 raw-loader 将不适合您(这里看起来就是这种情况，因为您的示例使用 CommonJS 模块语法)。导致问题的导入可能在您的应用程序代码、其他配置文件(例如您的 webpack 配置)中，或者可能在您在项目中使用的另一个依赖项中。

可能很难调试，因为所有这些区域(应用程序代码、配置、依赖项)都需要更新为使用 ES 模块，这并不总是一件容易的事。根据您的项目，您的最佳选择可能是继续使用 raw-loader 1.0.0 版，甚至使用 Angular CLI tool 开始一个新项目。然后复制你所有的应用程序代码，这样一切都是最新的，并且可以使用 CLI 的 update 轻松处理 future 的更新。命令