zoukankan      html  css  js  c++  java
  • webapck 插件HtmlWebpackPlugin的使用以及webpack 热更新;

    下面是案例目录:

    wepack.config.js部分选项;

    说一说webpack-html-plugin的用处;他就是一个html文件生成器;

       title是生成的html文件中的title标题;

       template是模板,意思是根据哪个.html文件来生成;

           inject是生成html文件的时候要不要把模板中的的html引入的js也一起带进去;默认是true的;

       data是自定义的属性,在页面中也可以取到;

           nimify是压缩,也没什么;它当中有两个选项,去掉注释去掉空行,当然还有其他的选项;

    webpack 热更新(即不需要刷新浏览器的情况下,数据变化了页面自动变化) 选项:注意了,

         先描述一下我的踩到的一些坑.........

       原本以为把源文件.的html(只限html文件)编译的html分开放[即源文件放在src,编译的放在dist目录下,-上面这个就是的;]可以更加区分;

    嗯哼,哪知道contentBase这种写法它只认"./dist"目录(也就是说网站跟目录就是只能是它);太没趣了;所以npm start (在package.json中配置) 之后再浏览器打开看不到那个html页面引入的js;

    于是又看到了另一种写法,contentBase: path.join(__dirname, "../webpack-demo4/"), ../ 这种也是绝对路径,因为__dirname是webpack.config.js所在的绝对路径;意思是我把dist的父级目录作为网站的根节点; ok 浏览器没有出现js找不到的404了;瞬间觉得还行;

    其实问题来了;根本就实现不了热更新....最后还是把src中的源文件移动到dist目录下面把,稍微更改一下webpack.config.js中的路径; (over)

  • 相关阅读:
    商贸通帐套隐藏方法
    固定资产打开提示:上年度数据未结转!
    ZOJ 2432 Greatest Common Increasing Subsequence
    POJ 1080 Human Gene Functions
    POJ 1088 滑雪
    POJ 1141 Brackets Sequence
    POJ 1050 To the Max
    HDOJ 1029 Ignatius and the Princess IV
    POJ 2247 Humble Numbers
    HDOJ 1181 变形课
  • 原文地址:https://www.cnblogs.com/liuliu-hai/p/7941338.html
Copyright © 2011-2022 走看看