初试webpack4--开发使用技巧

webfullStack 2019-12-30

1、webpack开发调试必备功能之模块热替换HMR
  了解热替换:  
    在修改模块之后,无需从新加载页面,会自动更新页面
    保留在完全更新加载页面时丢失的应用程序状态
    只更新变更内容,以节省宝贵的时间
    调整样式更快捷,几乎相当于在页面调试器中修改样式    

配置config文件
    在 devServer: {
      hot: true
      }
  配置plugin
    new webpack.NamedModulesPlugin() 当开启HMR的时候使用该插件会显示模块相对路径
    new webpack.HotModuleReplacementPlugin()
    在devServer中加入hotOnly表示只有热更新,不会自动刷新页面
      hotOnly: true
    需要手动添加代码告诉webpack接受更新的模块
      if (module.hot) {
        module.hot.accept()
      }

2、区分生产环境和开发环境的配置
  了解:
    开发环境和生产环境的构建目标差异很大,在开发环境中,我们需要具有强大的,具有实时重新加载或热模块替换能力和localhost sever。而在生产环境中,我们的目标则转向于关注更小的bundle,以及资源的优化,以改善加载时间。所以我们通常建议为每个环境编写彼此独立的webpack配置

安装
    npm install --save-dev webpack-merge
  拆分文件:
    在这里我们可以将webpack.config.js拆分为三个文件,分别是webpack.common.config.js 、 webpack.dev.config.js 和 webpack.prod.conf.js
    webpack.common.config.js 是放入一些我们公用的配置,比如 entry,出口output、常用loader以及插件
    webpack.dev.config.js 是在开发环境上的配置,比如devServer配置,热替换等方便开发的配置
    webpack.prod.conf.js 是在生产环境上的配置,比如分离CSS、压缩CSS和JS等

    在webpack.dev.config.js、webpack.prod.conf.js中引入webpack.common.config.js

      const merge = require(‘webpack-merge‘)
        const common = require(‘./webpack.common.conf.js‘)
        modules.exports = merge(common, {
          配置
        })
    修改package.json中的script
      {
        "dev": webpack --mode development --config ./config/webpack.dev.config.js"
        "prod": webpack --mode development --config ./config/webpack.prod.config.js"
      }

  

相关推荐