欢迎光临
我们一直在努力

webpack source-map/webpack-dev-serve/HTM

devtool 配置 source-map

当打包完成并运行的时候报错了,但我们很难找到错误出在哪里,是不是很烦?使用devtool配置source-map可以解决该问题。配置好后,当我们代码出问题时,会把报错映射到原文件目录下的错误,这样有利于提高排错效率。

module.exports = {
    devtool : 'inlin-cheap-source-map'
}

对应不同的环境,需要设置不同的devtool,但一般我们都会使用下面两个配置:

  • development配置:devtool: 'cheap-moudle-eval-source-map'
  • production配置:devtool: 'cheap-module-source-map'

具体配置什么意思,参考官方文档

webpack-dev-server

webpack-dev-server 可以提高我们的开发效率。它可以开启一个服务器,并且可以监听打包文件是否改变,如果发生改变,它可以帮我们去更新生成代码和刷新浏览器。

安装

npm i clean-webpack-plugin -D

配置 webpack.config.js

devServer: {
    contentBase: './dist' ,// 监听dist目录
    open: true,  // 启动服务后帮我们打开浏览器
    prot: 8080, // 设置端口号
    compress: true, // 开启gzip压缩
    proxy: {
        // 在这里可以设置代理
    }
}

配置 package.json

"start": "webpack-dev-server"

运行

npm run start

注意

devServer可以开启一个本地服务器,并帮我们加载最新资源,但打包好的文件会被放在内存中(提高执行和访问效率),不会生成dist目录,更多内容参考官方文档

hot module replacement

模块热替换(hot module replacement)功能会在应用程序运行过程中替换/添加/删除模块只会重新加载当前模块,而无需重新加载整个模块。

devServer: {
    contentBase: './dist',
    open: true, 
    prot: 8080,
    compress: true, 
    proxy: {  },
    hot: true, // 开启热更新
    hotOnly: true // 当编译发生错误时 不更新页面
}

我们还需要添加两个webpack自带的插件:

const webpack = require('webpack')
plugins: [
    // 显示模块的相对路径 可用于开发环境
    new webpack.NamedModulesPlugin(),
    // 开启热替换必须启用
    new webpack.HotModuleReplacementPlugin() 

]

配置好上面这些就大功告成了。值得注意的是,修改css内容时,css-loader底层会帮我们做好实时更新。而对于JS模块,我们需要手动去配置:

if(module.hot) {
    module.hot.accept('./number',()=>{
        let num = document.getElementById('number')
        document.body.removeChild(num)
        number()
    })
}

module.hot.accept(module,callback)是官方给出的语法,表示接受一个需要实时热更新的模块,当内容发生改变时,会被检测到,然后执行回调函数。更多内容还是要去看官方文档。

小记

  • HMR可以让我们运行项目并修改内容时无需完全刷新,而是只刷新被修改的模块
  • CSS被修改时,css-loader会帮我们处理,JS被修改时,我们可以通过module.hot.accept(module,callback)达到目的

关于HMR的更多内容参阅 官方文档

赞(1) 打赏
未经允许不得转载:散人研 » webpack source-map/webpack-dev-serve/HTM
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

6 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏