Webpack引入的概念 静态资源有哪些？ 出现的错误有哪些？

Js

       .js  .jsx  .coffee  .ts

Css

       .cssn  .less   .sass   .scss

Images

       .jpg  .png  .gif  .bmp  .svg

字体文件(Fonts)

       .svg  .tff  .eot  .woff  .woff2

模版文件

       .ejs  .jade  .vue[这是在webpack中定义组件的方式，推荐这么用]

网页中引入的静态资源多了，有什么问题？

1. 网页加载速度慢，因为发送了2次请求
2. 要处理错综复杂的依赖关系

如何解决上述的两个问题？

1. 合并、压缩、精灵图、图片的base编码
2. 可以使用之前学过的 requireJS、也可以使用  webpack可以解决各个之间的复杂依赖关系

什么是webpack？

Webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具

如何完美实现上述的2中解决方案？

1. 使用Gulp
2. 使用Webpack，是基于整个项目 进行构建

a借助于webpack这个前端【自动化构建工具】实现资源的【合并】【打包】【压缩】【混淆】等多功能

b根据官网的图片介绍webpack打包的过程

---

---

全局安装 webpack  指令：npm install webpack -g

 

 

问题一：vue中 webpack 打包时出错，如下图所示

解决方法如下

---

---

问题二：npm run dev时候, webpack-dev-server不是内部指令，也不少可以运行的程序 =====>报错

解决办法如下：

将项目里的“node_modules”文件夹删除，然后重新运行npm install

 

---

---

问题3：错误如下

npm ERR! code ELIFECYCLE  npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1npm ERR!
npm ERR! Failed at the [email protected] dev script.npm ERR! 
This is probably not a problem with npm. 
There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:

解决方法：

原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好。
（1）、npm uninstall webpack-dev-server
（2）、npm install [email protected]
（3）、npm run dev

---

---

问题四：错误如下

 

解决方法：本地安装webpack：npm install webpack

因为webpack-dev-server要求必须在本地安装webpack，即使已经全局安装了webpack，

于是我试着本地安装webpack，再次运行npm run dev 就成功了

---

---