webpack.config.ts

Question

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

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';

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

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

最新的原始加载程序版本在webpack中不起作用。如何解决？

webpack.config.ts

1 个答案: