zoukankan      html  css  js  c++  java
  • 实现webpack的实时打包构建

    1. 由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用`webpack-dev-server`来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
    2. 运行`cnpm i webpack-dev-server --save-dev`安装到开发依赖
    3. 安装完成之后,在命令行直接运行`webpack-dev-server`来进行打包,发现报错,此时需要借助于`package.json`文件中的指令,来进行运行`webpack-dev-server`命令,在`scripts`节点下新增`"dev": "webpack-dev-server"`指令,发现可以进行实时打包,但是dist目录下并没有生成`bundle.js`文件,这是因为`webpack-dev-server`将打包好的文件放在了内存中
    + 把`bundle.js`放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快
    + 这个时候访问webpack-dev-server启动的`http://localhost:8080/`网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script的src属性为:`<script src="../bundle.js"></script>`
    + 为了能在访问`http://localhost:8080/`的时候直接访问到index首页,可以使用`--contentBase src`指令来修改dev指令,指定启动的根目录:
    ```
    "dev": "webpack-dev-server --contentBase src"
    ```
    同时修改index页面中script的src属性为`<script src="bundle.js"></script>`

  • 相关阅读:
    Flash性能相关
    穿过某点绘制曲线
    oracle 动态列
    oracle 失效对象自动重新编译
    EBS 重新编译无效对象 invalid object
    oracle ebs Customer Info
    Oracle Customer Contacts Info
    Report Builder中的页码问题
    APPFND01564 ORA6502,ORA06512 in afscpcon IE 9
    EBS中发送电子邮件
  • 原文地址:https://www.cnblogs.com/sylys/p/11412284.html
Copyright © 2011-2022 走看看