devserver 和html-webpack-plugin的坑

直接上代码

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*清理dist文件夹*/
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    mode: "development",
       entry: {
           index: './src/index.js',
           },
output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
},
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
         compress: true,
        port: 9000,
        index:"dist/admin.html"

    },
    module: {
    rules: [
    {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                "presets": [['@babel/preset-env',
                    {
                        "useBuiltIns":"usage",
                        "corejs":3
                    }

                ]
                    ]
            }
        }
    }
    ],
},

plugins: [
    /*在plugins引入CleanWebpackPlugin，不需要指定dist了*/
    new CleanWebpackPlugin(),
    new webpack.ProvidePlugin({
        join: ['lodash', 'join'],
    }),
    new HtmlWebpackPlugin({
        title: "Webpack App",
        filename: 'dist/admin.html'
    })
],
};

总结

如果使用html-webapck-plugin生成的dist ，在dev-server的时候一定要在index ，将dist卸载里面，而不是写在contentbase中。