zoukankan      html  css  js  c++  java
  • webpack 热更新

    1.安装webpack

      npm install webpack -g  //全局安装

      npm install webpack --save-dev  //开发环境

    2.使用webpack

      创建一个webpack.config.js文件,这个文件是webpack的配置文件。该文件配置主要分为:entry,output,module

      这里就不过多的赘述webpack的基本使用了

      文件目录如下:

              

    webpack.config.js基本配置:

          

    package.json配置:

          

    name 和 version是必须的。通过--save-dev安装的依赖就会添加到devDependencies中,通过--save安装的依赖就会添加到dependencies中,scripts是用来执行脚本命令的,可以通过npm run commanName来执行。

    3.热更新

      因为该项目用ES6,所以需要babel转换

      安装babel:npm install babel-preset-es2015 --save-dev

      配置.babelrc文件:{"presets": ["es2015"]}

      到目前为止,在命令行输入:npm run build,就可以正常打开本地的index.html文件了

    那么在运行npm run build命令时,到底做了写什么?

      1.首先这个命令会去运行package.json文件里面的scripts脚本

      2.scripts脚本首先通过babel把drag编译成.temp临时文文件

      3.第三步是scripts会去执行webpack打包命令,该命令会去查找webpack.config.js配置文件中的entry和output,然后输出一个build/bunble.js文件

      4.然后就在本地可以打开index.html文件了

    到了这一步,只完成了一小步,因此如果我修改一个文件,我还需要手动去运行上面的那个命令,然后在刷新浏览器,才能看到更改后的效果,这样开发效率就会大大降低。这时我们需要“热更新”来帮助我们快速开发。

    1)安装webpack-dev-server

      npm install webpack-dev-server --save-dev

    2)启动服务器:

      package.json: webpack-dev-server --progress --colors也可以把该如下,写进scripts脚本。

    这会绑定一个小型的express服务器到localhost:8090,来为你的静态资源及bunble(自动编译)服务。

      通过访问localhost:8090,.temp文件没改变一次,bunble就会被重新编译。

     但是到目前为止,index.html还是个本地文件,怎么生成一个服务器上的Index.html文件呢?

    这时就需要使用到官方推荐的:html-webpack-plugin插件

    4.html-webpack-plugin

      1)安装html-webpack-plugin

      npm install html-webpack-plugin --save-dev

      2)配置html-webpack-plugin

      webpack.config.js:

        

     然后打开:http://localhost:8090/index.html,就可以看到效果。

    然后可以修改.temp下的文件,就可以实现热更新了。

    但是到这里还有一个很大的问题没有解决,我只有通过改变babel编译后的.temp文件才能实现热更新,因为webpack的入口文件是编译后的.temp文件。那么我怎么样做,能监控到源文件变化,然后在自动执行babel转换并且重新打包呢?

    5.webapck +babel

      这时就需要把webapck和babel结合起来使用。

      这里我使用的方法是配置webpack.config.js

      1)把webpack.config.js文件改成webpack.config.babel.js

      2)然后把之前通过配置.babelrc文件,并且通过scripts的babel drag --out-dir .temp 转换的方式,改成通过webpack的babel-loader去实现。

      webpack.config.babel.js:

      

      然后把package.json里面的scripts命令改成:

        "build": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

    然后再打开http://localhost:8090/index.html,修改源文件就实现热更新的功能了。

    最终的结构目录如下:

      

  • 相关阅读:
    CentOS7中安装Mysql5.7
    CentOS7安装JDK
    设计模式之策略模式
    jmeter:文件下载连接请求保存文件
    pytest框架
    jmeter:设置全局默认请求
    jmeter:全局设置变量参数
    Badboy报错:不支持XXX属性、方法
    jmeter配置元器件:CSV Data Set Config
    jmeter报错:java.lang.IllegalArgumentException: Filename must not be null or empty
  • 原文地址:https://www.cnblogs.com/thonrt/p/6595033.html
Copyright © 2011-2022 走看看