时间戳

首页 > 解决方案 > 如何修复 webpack 配置中最新的 raw-loader 版本不工作的问题？

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

问题描述

在我的 Angular 项目中，如果我们使用该应用程序，如果我们使用raw-loader@1.0.0. 而如果我们使用 version 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
    }
};

标签： javascriptangularfrontendraw-loader

解决方案

根据他们的发布页面 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';

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

调试可能很困难，因为所有这些区域（应用程序代码、配置、依赖项）都需要更新为使用 ES 模块，这并不总是一件容易的事。根据您的项目，您最好的选择可能是使用 1.0.0 版本的 raw-loader，甚至使用 Angular CLI 工具启动一个新项目，然后复制所有应用程序代码，这样一切都是最新的，并且使用 CLI 的更新命令可以很容易地处理未来的更新

推荐阅读