zoukankan      html  css  js  c++  java
  • 初试webpack4--开发使用技巧

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

        

  • 相关阅读:
    centos 6.4 FTP安装和配置
    常用正则表达式集锦
    同一服务器部署多个tomcat时的端口号修改详情
    介绍linux下vi命令的使用
    CentOS下安装两个或多个Tomcat7
    tomcat解析之简单web服务器(图)
    吻你
    用C++语言开发Android程序 配置开发环境
    内地开源镜像网站
    Android SDK Android NDK Android Studio 官方下载地址
  • 原文地址:https://www.cnblogs.com/webtaotao/p/12108200.html
Copyright © 2011-2022 走看看