新西兰服务器

如何建立demo配置webpack环境


如何建立demo配置webpack环境

发布时间:2022-03-16 17:39:53 来源:高防服务器网 阅读:97 作者:iii 栏目:web开发

这篇文章主要讲解了“如何建立demo配置webpack环境”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何建立demo配置webpack环境”吧!

  1、建立一个demo

  2、进入建立的webpack_demo目录下创建一个dist文件夹(用于生产)和src文件夹(用于开发环境)

  src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。

  dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。

  3、编写程序文件:

  dist文件下手动建立一个index.html文件

  /dist/index.html

  <!DOCTYPEhtml><htmllang="en"><head>

  <metacharset="UTF-8">

  <metahttp-equiv="X-UA-Compatible"content="ie=edge">

  <title>webpack</title></head><body>

  <pid="title"></p>

  <scriptsrc="./bundle.js"></script></body></html>

  解释:这里引入bundle.js文件,等会用webpack可以生成在src下面建立一个entry.js的入口文件

  /src/entry.js下:

  document.getElementById(&lsquo;title&rsquo;).innerHTML=HelloWebpack;;

  然后就是进行webpack打包:

  1、在vscode里面的终端中输入:webpacksrc/entry.jsdist/bundle.js执行成功后会在dist目录下生成bundle.js文件,在浏览器中显示HelloWebpack的信息

  2、也可能是这样进行打包webpacksrc/entry.jsoutputdist/bundle.jsmodedevelopment

  会在dist目录下生成bundle.js文件

  全局安装live-server:

  npminstall-glive-server

  安装完毕后在终端执行live-server就会在浏览器中显示HelloWebpack的信息

感谢各位的阅读,以上就是“如何建立demo配置webpack环境”的内容了,经过本文的学习后,相信大家对如何建立demo配置webpack环境这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是高防服务器网,小编将为大家推送更多相关知识点的文章,欢迎关注!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[