webpack的基本使用

1.使用webpack的原因

1. 常见的网页引用的静态文件
   1）js（.js .jsx .coffee .ts）
   2）css（.css .less .sass .scss）
   3）images（.jpg .png .gif .bmp .svg）
   4）字体文件（.svg .ttf .eot .woff .woff2）
   5）模板文件（.ejs .jade .vue）
   有太多的资源需要被管理
2. 解决静态资源过多的方法
   1）合并，压缩，精灵图，图片的Base64编码（处理请求多）
   2）requestJs,webpack（复杂的依赖关系）

2.webpack的基本使用

webpack下载地址：webpack.github.io

1. waebpack安装（要先安装node.js）
   [重新制定安装仓库中心：npm config set registry http://registry.npm.taobao.org]
   1）npm i webpack -g
   2）npm i webpack --save-dev
2. webpack的作用
   1）能够处理js文件之间的依赖关系
   2）能够处理js的兼容问题
   3）减少请求次数
3. webpack的使用
   1）初始化
   npm init -y
   会生产一个webpack.json文件
   补充

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development" ,
    "build": "webpack --mode production"
  }

2）安装资源

npm i jquery -s

3）js打包

webpack 要打包的文件路径 输出的文件路径
//我在使用的时候，上面的格式的命令无法运行，只有下面格式的才能运行
//webpack a.js --output-filename b.js --output-path . --mode development

直接webpack 要打包文件路径
文件输出带dist\main.js中

总结：
个人感觉webpack还是挺麻烦的，每个资源文件都要进行打包，但是这样做，带来的好处还是比较可观的，网页的访问速度更快了，也不需要再去管理那些资源包了，全部由webpack来管理