webpack devServer 无法自动刷新浏览器，但是可以自动编译

DataPipeline 发布于2019-08-26 18:27 / 3585人阅读

摘要：后面设置的输出路径都以此为基础用于文件路径查找抽离文件自动生成文件热模块更新把注释掉之后，可以加载成功文件和自动刷新了。估计是因为把文件都抽离到这里了，所以在下，引用和没有效。只是估计，新手上路，目前对的使用还是摸石过河。

这几天在学习webpack使用中，发现的一个问题，记录一下
问题：
1.webpack devServer 无法自动刷新浏览器，但是可以自动编译
2.无法加载js文件（不使用devServer情况下，可以正常加载js）

webpack.config.js的配置如下：

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 封装自动生成html插件需要的参数
var getHtmlConfig = function(name){
    return {
            filename : "view/" + name + ".html",
            template : "./src/view/" + name + ".html",
            inject : "true",
            hash : "true",
            chunks :["common",name]
    };
}

module.exports = {
    mode : "development",/*三种打包模式，development（用于开发，方便阅读）、production（用于上线，压缩优化）、none（啥都不设置，给机器看的）*/
    entry : {//入口
        "common" : "./src/page/common/index.js",
        "index" : "./src/page/index/index.js",
        "login" : "./src/page/login/index.js"
        
    },
    
    devServer : {//告诉开发服务器(dev server)，在哪里查找文件
        contentBase : path.join(__dirname, "dist"),
        inline : true
    },
    output : {//输出
        filename : "js/[name].js",
        path : path.resolve(__dirname,"dist"),//绝对路径，当前目录下的dist。后面设置的输出路径都以此为基础
    },
    module : {//loader
        rules : [
            {
                test : /.css$/,
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader",
                    publicPath : "../"//用于CSS文件url路径查找：url(../resource/xxx.jpg)
                })
            },
            {
                test: /.(gif|png|jpg|woff|svg|eot|ttf)??.*$/,
                use: 
                    {
                        loader : "url-loader",
                        options : {
                            limit : 10000,
                            name : "resource/[name]-[hash].[ext]"
                        }
                    }
            }
        ]
    },
    plugins : [
        // 抽离css文件
        new ExtractTextPlugin({
            filename: "css/bundle.css",
            disable: false,
            allChunks: true
        }),
        // 自动生成html文件
        new HtmlWebpackPlugin(getHtmlConfig("index")),
        new HtmlWebpackPlugin(getHtmlConfig("login")),
        //热模块更新
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    /* 把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。命令行打包显示：
    js/vendors~common~index~login.js    345 KiB  vendors~common~index~login  [emitted]  vendors~common~index~login  
    估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效 */
//     optimization: {
// 
//         splitChunks: {
//           chunks: "initial",
//           minSize: 30000,
//           maxSize: 0,
//           minChunks: 1,
//           maxAsyncRequests: 5,
//           maxInitialRequests: 3,
//           automaticNameDelimiter: "~",
//           name: true,
//           cacheGroups: {
//             vendors: {
//               test: /[/]node_modules[/]/,
//               priority: -10
//             },
//             commons: { 
//                     test: /page//,
//                     name: "page",
//                     priority: 10,
//                     enforce: true
//             }
//           }
//         }
//     }
    
};

命令行打包后显示信息：

解决：
把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效。
只是估计，新手上路，目前对webpack的使用还是摸石过河。大家知道原因麻烦评论告知

云服务器 GPU云服务器自动刷新代码 html自动刷新 cdn自动刷新自动刷新设置教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110216.html

webpack优化

摘要：使用要给项目构建接入动态链接库的思想，需要完成以下事情把网页依赖的基础模块抽离出来，打包到一个个单独的动态链接库中去。接入已经内置了对动态链接库的支持，需要通过个内置的插件接入，它们分别是插件用于打包出一个个单独的动态链接库文件。 webpack优化查看所有文档页面：全栈开发，获取更多信息。原文链接：webpack优化，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。 ...

ChanceWong 2019-08-22 17:34 评论0 收藏0
webpack 单页面应用实战

摘要：关于这个单页面应用大家可以直接去我的上查看，我将结合这个项目去介绍。这篇文章将介绍如何利用 webpack 进行单页面应用的开发，算是我在实际开发中的一些心得和体会,在这里给大家做一个分享。webpack 的介绍这里就不多说了，可以直接去官网查看。关于这个单页面应用大家可以直接去我的github上查看https://github.com/huangshuwei/webpackFor...

anonymoussf 2019-08-19 18:42 评论0 收藏0
webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
webpack配置

摘要：配置无入口的在输出时的文件名称。配置发布到线上资源的前缀，为类型。则是用于配置这个异步插入的标签的值。配置以何种方式导出库。是字符串的枚举类型，支持以下配置。在为时，配置将没有意义。是可选配置项，类型需要是其中一个。 webpack配置查看所有文档页面：全栈开发，获取更多信息。原文链接：第2章配置，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。配置 Webpack...

Doyle 2019-08-22 17:27 评论0 收藏0
React入门系列 - 2 编写第一个Hello world的React程序

摘要：安装必要的开发包安装两个包安装编写一个的首先我们编写一个的组件但是这仅仅是一个组件，我们需要一个页面来容纳的组件。到这一步，需要准备的东西已经完成了。 2.1 采用create react app 编写 create-react-app项目 [[点击前往Github]](https://github.com/facebook/c... 是facebook推出的入门初始化项目，适合新手第...

PingCAP 2019-08-23 14:37 评论0 收藏0