1.生产环境与开发环境的区别

你们肯定也很好奇生产环境(production)与开发环境(development)的区别吧

这个是我们的生产环境 他打包好编译出来的代码只有我们自己写入的一些代码

而开发环境出来的呢就会有很多注释 当然这些注释是给我们自己看的

2.打包html

3.安装html插件

npm i html-webpack-plugin -D

4.在配置文件中引入我们的插件

5.在我们的配置文件的最下方写入html配置

webpack

我们在终端打包

6.打包完成生成一个index文件

7.在文件中写入其他内容

但是当我们需要写入别的东西时 我们还是需要在自己的src下面创建一个index.html里面也可以看到我们写入了一个h1标签

webpack

执行打包

8.打包后的内容展示

这时我们可以看到打包好的有我们刚刚写入的标签 但是当我们细心的人会发现 我们没打包之前我们只写入了标签 我们并没有引入css和js 呢这就是模板的好处了 他可以自动引入

9.改变title的内容

当然呢我们也可以改变我们的title 我们需要在配置文件中 指定一下html中使用的变量

在我们自己的src下面的index.html中的title中一步步写入我们配置的东西

webpack

进行打包

10.打包后的效果展示

这时我们可以看到我们的title中就打包成了我们在配置设置的

11.打包多个页面

当然在我们实际开发中 我们不指一个页面 我们有很多个页面 这时我们可以看到我们在自己的src下面 写入了两个a链接 我们打包完成以后

我们可以看到两个都有首页和关于 这时如果我们想测试一些效果
我们在终端上cd到我们打包好的呢个文件上

然后在通过serve .来打开

这时我们打开是这样子的

当我们点击关于的时候 我们可以发现箭头指向的是个关于我们 这时我们的两个页面已经写好了 如果后期还有别的要加入 只需要同样操作一遍即可

12.压缩html

我们可以看到我们在关于我们的后面写了一些禁制 然后我们通过打包

可以看到我们的关于我们已经压缩好了

这时在来看我们的index.html我们会发现并没有被压缩 这是因为我们只有在关于我们里设置了这些属性 当然如果你的index.html也想被压缩 只需要把这些复制到index.html下面

13.总结

今天呢 我们学到了生产环境和开发环境的区别 我们也知道了打包html我们需要安装插件 在配置文件里面 引入插件和配置内容 我们还知道了怎么打包多个页面 怎么选择性的压缩页面等 我们在内容中也学到了很多 我也希望大家勇敢尝试哦