Question

我正在尝试将我们的整个构建从requirejs和一个烂摊子转换为webpack，所以我会尽力保留下面的相关细节。

错误，在webpack

的控制台中输出

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide':
  Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide'

同样的错误，/home/user/Documents/ide/dist/index.html

中的输出

Html Webpack Plugin:<pre>
  Error: Child compilation failed:
  Entry module not found: Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/html':
  Error: Can't resolve '/home/user/Documents/ide/dist/index.html' in '/home/user/Documents/ide'

在webpack config的plugins

下

new HtmlWebpackPlugin({
            filename: config.build.index,
            template: 'dist/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },

我已确认config.build.index评估为/home/user/Documents/ide/dist/index.html

我不明白，我认为html文件是由这个插件生成的，为什么我在找不到的文件中出错？

其他资源建议将index.html更改为index.ejs，这没有任何效果。我也尝试了绝对路径，这没用。

以防万一，我的配置（大多是从vue-webpack cli构建器中窃取）：

我的基础配置：

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        app: './public/js/ide.js'
    },
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
            ? config.build.assetsPublicPath
            : config.dev.assetsPublicPath
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('public/js'),
        },
        modules: ['node_modules']
    },
    module: {
        rules: [
            ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('public/js'), resolve('test')]
            },
            { test: /\.hbs$/, loader: "handlebars-loader" },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            }
        ]
    },
    node: {

        setImmediate: false,
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
    }
};

与我正在尝试开始工作的生产配置合并：

const webpackConfig = merge(baseWebpackConfig, {
    module: {
        rules: utils.styleLoaders({
            sourceMap: config.build.productionSourceMap,
            extract: true,
            usePostCSS: true
        })
    },
    devtool: config.build.productionSourceMap ? config.build.devtool : false,
    output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),
        chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': env
        }),
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false
                }
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true
        }),
        new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css'),
            allChunks: false,
        }),
        new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
                ? { safe: true, map: { inline: false } }
                : { safe: true }
        }),
        new HtmlWebpackPlugin({
            filename: process.env.NODE_ENV === 'testing'
                ? 'index.html'
                : config.build.index,
            template: 'dist/index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunksSortMode: 'dependency'
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.HashedModuleIdsPlugin(),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks(module) {
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'app',
            async: 'vendor-async',
            children: true,
            minChunks: 3
        }),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../static'),
                to: config.build.assetsSubDirectory,
                ignore: ['.*']
            }
        ])
    ]
});

Answer 1

SELECT a.* FROM a WHERE NOT EXISTS (SELECT 1 FROM A_B_Join b WHERE a.ID = b.A_ID AND b.B_ID IN (7, 8))指的是您提供给插件而不是输出路径的模板html文件。然后，插件会将包脚本信息注入template的底部。

HtmlWebpackPlugin找不到index.html，但将其错误输出到index.html声称找不到

1 个答案: