时间戳

首页 > 解决方案 > Webpack 工作，但 webpack-dev-server 失败

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

问题描述

我正在使用 webpack 打包一些前端代码。当我使用 webpack 打包时，一切正常，但是当我使用 webpack-dev-server 发布到本地服务器时，我得到了一些错误。

这是执行 webpack 的结果。 在此处输入图像描述

这是执行 webpack-dev-server 的结果。 在此处输入图像描述

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-dev-server 的版本是 3.2.1

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

标签： webpack

解决方案

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

文档说：“最好避免使用入口点作为缓存组的名称”，所以基本上你应该改变

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
            }
        }
    }
},

希望这可以帮助

推荐阅读