Webpack工作，webpack-dev-server失败。

Question

我用webpack来打包一些前端代码。当我和webpack一起打包时，一切都很好，但是当我使用webpack-dev服务器发布到本地服务器时，我会发现一些错误。

这是处决webpack的结果。在这里输入图像描述

这是webpack的推发球的结果.在这里输入图像描述

webpack.config.js的配置如下：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

// 
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template: './src/view/' + name + '.html',
        filename: 'view/' + name + '.html',
        inject: true,
        hash: true,
        chunks: ['common', name]
    }
};

// webpack config
var config = {
    // mode: 'dev' === WEBPACK_ENV ? 'development' : 'production',
    mode: 'development',
    entry: {
        'common' : ['./src/page/common/index.js'],
        'index' : ['./src/page/index/index.js'],
        'login' : ['./src/page/login/index.js'],
    },
    devServer: {
        contentBase: './dist/view'
    },
    output: {
        // path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'js/[name].js'
    },
    externals: {
        'jquery' : 'window.jQuery'
    },
    module: {
        rules: [
            // css文件的处理
            {
                test: /\.css$/,
                use: [
                     MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // 图片的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 2048,
                      name: 'resource/[name].[ext]',
                    }
                  }
                ]
            },
            // 字体图标的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        alias: {
            util : path.resolve(__dirname + '/src/util'),
            page : path.resolve(__dirname + '/src/page'),
            service : path.resolve(__dirname + '/src/service'),
            image : path.resolve(__dirname + '/src/image'),
        }
    },
    optimization: {
        runtimeChunk: false,
        splitChunks: {
            cacheGroups: {
                common: {
                    name: "common",
                    chunks: "all",
                    minChunks: 2
                }
            }
        }
    },
    plugins: [
        // new CleanWebpackPlugin(['dist']),
        // 把CSS单独打包到文件里
        new MiniCssExtractPlugin({
            filename: "css/[name].css",
        }),
        // HTML模版的处理
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
    ],

    devServer: {
        port: 8088,
        inline: true,
        proxy: {
            '**/*.do' : {
                target: 'http://localhost:8088/',
                changeOrigin: true
            }
        }
    }
};

/*if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}*/

module.exports = config;

webpack的版本是4.29.5

webpack-cli的版本为3.2.3

webpack开发服务器的版本为3.2.1。

我不知道为什么会这样。有人能帮我吗？

Answer 1

我有类似的问题，并在这里找到了解决方案：github问题

文档上写着：“最好避免使用入口点作为cacheGroup的名称”，所以基本上您应该更改

optimization: {
    runtimeChunk: false,
    splitChunks: {
        cacheGroups: {
            common: {
                name: "common",
                chunks: "all",
                minChunks: 2
            }
        }
    }
},

至：

optimization: {
    runtimeChunk: false,
    splitChunks: {
        cacheGroups: {
            commonStyle: { // changed this name of group
                name: "common", // to be different from word used here
                chunks: "all",
                minChunks: 2
            }
        }
    }
},

希望这能有所帮助