Question

我正在运行webpack，并且正在使用prerender-loader来呈现语义静态HTML，而不是通常为空的HTML页面。

我可以npm run build很好，然后在输出中看到所需的HTML。

但是，当我尝试npm start时，出现此错误：

    ERROR in ./src/index.html (./node_modules/prerender-loader/dist/prerender-loader.js?string!./src/index.html) 
    Module build failed (from ./node_modules/prerender-loader/dist/prerender-loader.js): 
    Error: Error:  Module not found. attempted require("url")

我在这个问题上找不到很多资源。 This link提供了建议，但没有明确的答案。

我的 webpack.config.js ：


    /* eslint-env node */
    const htmlPlugin = require('html-webpack-plugin');
    const miniCssExtractPlugin = require('mini-css-extract-plugin');
    const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

    /* eslint-env node */
    const htmlPlugin = require('html-webpack-plugin');
    const miniCssExtractPlugin = require('mini-css-extract-plugin');
    const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

    module.exports = {
        entry: './src/main.js',
        output: {
            filename: 'bundle.js',
            path: `${__dirname}/build`
        },
        optimization: {
            minimizer: [
                new optimizeCSSAssetsPlugin({}),
            ]
        },
        plugins: [
            new htmlPlugin({
                template: '!!prerender-loader?string!./src/index.html', 
            }),
            new miniCssExtractPlugin({ filename: 'main.css' })
        ],
        module: {
            rules: [
                {
                    test: /.html$/,
                    use: {
                        loader: 'html-loader'
                    }
                },
                {
                    test: /\.css$/,
                    use:  [
                        { 
                            loader: 'style-loader' 
                        }, 
                        miniCssExtractPlugin.loader, 
                        { 
                            loader: 'css-loader' 
                        }, 
                        { 
                            loader: 'postcss-loader'
                        }
                    ]
                },
                {
                    test: /\.(jpg|png|svg)$/,
                    use: {
                        loader: 'url-loader',
                        options: {
                            limit: 5000
                        }
                    }
                }
            ]
        }
    };

感谢您的帮助。

Answer 1

如果有人仍然遇到此问题，一个快速的解决方案是在不构建时排除 prerender-loader：

const isProduction = process.env.NODE_ENV == "production"

module.exports = {
    plugins: [
        new htmlPlugin({
            template: isProduction ? 
                '!!prerender-loader?string!./src/index.html' : 
                './src/index.html',
        }),
        new miniCssExtractPlugin({ filename: 'main.css' })
    ],
}

如果需要，此模式允许使用不同的模板进行开发和生产。

使用preloader-render时npm无法启动

1 个答案: