7.webpack开启本地服务器

QHQLemon

于 2019-12-23 11:36:47 发布

阅读量469

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/weixin_38022998/article/details/103662728

版权

webpack 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用webpack-dev-server创建本地服务器，实现自动监听并刷新浏览器。同时，讲解了webpack的热更新功能——hot module replace，它能在文件改动后仅更新修改部分，避免整个页面刷新。通过全局或局部安装webpack-dev-server，然后执行命令启动服务。对于js文件的热更新，需要在入口文件进行相应配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. webpack-dev-server

（1）webpack-dev-server：开启本地服务器，并自动监听工程文件(不包括配置文件)，自动刷新浏览器

（2）全局/局部安装 npm install webpack-dev-server -g npm install webpack-dev-server --save-dev

    devServer: {                             //与plugins等同级
        port: 9090,
        contentBase: 'dist',
    },

（3）执行 webpack-dev-server

2.热更新 hot module replace

webpack-dev-server修改文件后，每次刷新浏览器，重新获取所有资源，热更新只更新修改的部分，不重新刷新页面

    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
        }),
        // new CleanWebpackPlugin(),
        new Webpack.HotModuleReplacementPlugin()    //引入webpack
    ],
    devServer: {
        port: 9090,
        contentBase: 'dist',
        hot: true //开启热更新
    },

注意：js更改会重新加载页面，要实现热更新，在入口文件增加

if(module.hot){
    module.hot.accept();
}