欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  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(‘title’).innerHTML=’HelloWebpack’;
 
  然后就是进行webpack打包:
 
  1、在vscode里面的终端中输入:webpacksrc/entry.jsdist/bundle.js执行成功后会在dist目录下生成bundle.js文件,在浏览器中显示HelloWebpack的信息
 
  2、也可能是这样进行打包webpacksrc/entry.js–outputdist/bundle.js–modedevelopment
 
  会在dist目录下生成bundle.js文件
 
  全局安装live-server:
 
  npminstall-glive-server
 
  安装完毕后在终端执行live-server就会在浏览器中显示HelloWebpack的信息



 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56845.shtml