webpack使用merge插件之后无法build(HtmlWebpackPlugin is not defined)

Question

问题描述

最近在学习webpack4和vue,正好学习到webpack-merge这个插件，于是简单结合Vue就手动练习了一下，截图是我的目录结构：

config目录里面的是配置文件
data.js是一个vue组件

各个文件代码如下：

//base.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../../dist')
    },
    plugins: [new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack配置文件分离（基础，开发，生产）',
            template: 'src/index.html',
        })
    ],
    resolve: {
        alias: {
            vue: "vue/dist/vue.js"
        }
    },
    module: {
        rules: [

            {
                test: /\.css$/,
                use: [

                    'style-loader',
                    'css-loader',
                ]
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 8192,
                    }
                }]
            },
            {
                test: /.(js|jsx)$/,
                include: [path.resolve(__dirname, 'src')],
                loader: 'babel-loader',
                options: {
                    plugins: ['syntax-dynamic-import'],
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                modules: false
                            }
                        ]
                    ]
                }
            }
        ]
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    priority: -10,
                    test: /[\\/]node_modules[\\/]/
                }
            },
            chunks: 'async',
            minChunks: 1,
            minSize: 30000,
            name: true
        }
    },
}

//dev.config.js
const baseConfig = require('./base.config');
const webpackMerge = require('webpack-merge');
module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: '../../dist',
        open: true,
        inline: true,
    }
})

//prod.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssCleanupPlugin = require('css-cleanup-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ImageminPlugin = require("imagemin-webpack");
const baseConfig = require('./base.config');
const webpackMerge = require('webpack-merge');
module.exports = webpackMerge(baseConfig, {
    plugins: [
        new HtmlWebpackPlugin({
          
            minify: {
                collapseBooleanAttributes: true,
                collapseWhitespace: true,
                removeComments: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        }),
    
        new MiniCssExtractPlugin({
            filename: '[name].css',
            // chunkFilename: '[id].css',
        }),
   
        new CssCleanupPlugin(),
     
        new OptimizeCssAssetsPlugin({
            cssProcessorPluginOptions: {
                preset: ['default', {
                    discardComments: {
                        removeAll: true
                    }
                }],
            },
            canPrint: true
        }),
        new ImageminPlugin({
            bail: true,
            cache: '../../imgcache',
            imageminOptions: {
                filter: (source, sourcePath) => {
                    if (source.byteLength < 8192) {
                        return false;
                    }
                    return true;
                },
                plugins: [
                    ["gifsicle", {
                        interlaced: true,
                        optimizationLevel: 9
                    }],
                    ["jpegtran", {
                        progressive: true,
                        optimizationLevel: 9
                    }],
                    ["optipng", {
                        optimizationLevel: 9
                    }],
                    [
                        "svgo", {
                            plugins: [{
                                removeViewBox: false
                            }]
                        }
                    ]
                ]
            }
        })
    ],
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i,
                cache: '../../jscache/',
                parallel: true,
            })
        ]
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '../../',
                }
            }]
        }, {
            test: /.(js|jsx)$/,
            include: [path.resolve(__dirname, 'src')],
            loader: 'babel-loader',
            options: {
                plugins: ['syntax-dynamic-import'],
                presets: [
                    [
                        '@babel/preset-env',
                        {
                            modules: false
                        }
                    ]
                ]
            }
        }]
    },

})

//data.js
export default {
    data() {
        return {
            arr: [1, 2, 3, 4, 5]
        }
    },
    template: `
        <div>
        <p>这是一段文字</p>
        <ul class='ul'>
            <li v-for="(item,index) in arr">
                  {{index}}-{{item}}
            </li>
        </ul>
      </div>
  `
}

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<body>
<div id="app"></div>
</body>
</html>

//package.json
{
    "version": "1.0.0",
    "description": "My webpack project",
    "scripts": {
        "build": "webpack --config ./src/config/prod.config.js",
        "start": "webpack-dev-server --config ./src/config/dev.config.js"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/preset-env": "^7.6.2",
        "babel-loader": "^8.0.6",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "css-cleanup-webpack-plugin": "^1.0.2",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "html-webpack-plugin": "^3.2.0",
        "imagemin-gifsicle": "^6.0.1",
        "imagemin-jpegtran": "^6.0.0",
        "imagemin-mozjpeg": "^8.0.0",
        "imagemin-optipng": "^7.0.0",
        "imagemin-pngquant": "^8.0.0",
        "imagemin-svgo": "^7.0.0",
        "imagemin-webpack": "^5.1.0",
        "mini-css-extract-plugin": "^0.8.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "rm-unused-css": "^1.1.13",
        "style-loader": "^1.0.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "url-loader": "^2.1.0",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.1",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "vue": "^2.6.10"
    }
}

在dev模式下都很正常，但是build之后报错：

ReferenceError: HtmlWebpackPlugin is not defined at Object.<anonymous>
(D:\webpack\2019VuejsTutorials\p88\src\config\prod.config.js:20:13)

另外，虽然一顿瞎操作DEV模式OK了，但是对各种path，publicPath，contentBase，template的路径，总是感觉模糊。

//base.config.js
   entry: './src/index.js',
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, '../../dist')，
        // publicPath:''
    },

//dev.config.js
   devServer: {
        contentBase: '../../dist',
        open: true,
        inline: true,
       // publicPath:''
    }    
    
    
    

1.入口和出口是否正确的(entry和path)，分别对应的路径是谁

1. HtmlWebpackPlugin的template路径相对的是谁

3.devServer里面的contentBase和publicPath路径都该怎么算

Answer 1

生产环境中HtmlWebpackPlugin插件你没有引入哦