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>`

  • 相关阅读:
    求字符串的全排列
    不能被继承的类
    Apache2启动错误以及Ubuntu update的错误
    从尾到头输出链表
    教你在网页上加QQ链接
    UL LI P 图片加文字无缝滚动
    ASP.net 里怎么对fileUpload控件上传的文件进行管理
    表单标签
    如果我为我女朋友做了这些,她一定会娇滴滴的说:“你真坏!
    break,continue,return
  • 原文地址:https://www.cnblogs.com/sylys/p/11412284.html
Copyright © 2011-2022 走看看