webpack 基本用法

任务: 

   1.建立基本项目结构

   2.第一次webpack打包

 

---

tips: 低版本webpack如何升级，（在项目已经有依赖包的情况下）

第一步 找到webpack目录下的   将其删除

第二步 打开package.json文件  修改要升级到的版本

 

第三步  在webpack文件夹目录下 打开cmd   输入指令  npm install

 

即可将webpack版本和已存在的依赖包全部替换。

 

咳咳  进入正题！

---

1.建立项目基本结构

   建立两个文件夹   

   src放源代码(即js,css,html这些)       

   dist是生产环境容器(即代码过审，过测试，准备上传至服务器或什么地方时，就放这里头)

   总结一下   src放开发代码   dist放开发之后的成品。

 

然后在dist文件夹创建index.html文件

创建一个<div id="title"></div>

 

记得预设 <script  src="bundle.js"> </script>    //该文件是用webpack打包时自动生成的  所以需要提前引入

 

然后在src文件夹下创建一个入口文件(此处命名为entery.js)

写入   document.getElementById("title").innerHTML="Hello Maomao";

---

2.进行第一次打包

现在就可以开始打包文件了

打包命令为:  webpack src/index.js  dist/index.html    (文件名自定义即可)

然后  锵锵锵！

报错了，

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

 

以上的警告指的是没有设定是开发模式还是生产模式,要求指定.

只需要在项目中的package.json中script中配置上

 "dev": "webpack --mode development",    "build": "webpack --mode production" 两句即可
 

然后从dist访问即可查看打包后的结果   运行index.html   

页面上就会有Hello Maomao打印了