webpack工具如何打包文件--基本配置和初体验

1. 在网页中会引用哪些常见的静态资源？

样式表 .css/.less/.scss
JS文件– .js/.ts
图片 .jpg/.jpeg/.png/.gif/.bmp/.svg/.webp
字体文件 .eot/.ttf/.woff/.woff2/.svg
模板文件 .vue/.jsx

2. 网页中引入的静态资源多了以后有什么问题？？？

对网页性能不友好：要发起很多的静态资源请求，降低页面的加载效率，用户体验差；
对程序开发不友好：前端程序员要处理复杂的文件之间的依赖关系；

3. 如何解决上述两个问题

对于 JS 文件或 CSS 文件，可以合并和压缩；小图片适合转 Base64 格式的编码；
通过一些工具webpack，让工具自动维护文件之间的依赖关系；

4. 什么是webpack?

什么是webpack：webpack 是前端项目的构建工具；前端的项目，都是基于 webpack 进行构建和运行的；
什么项目适合使用webpack：
- webpack 非常适合与单页面应用程序结合使用；
- 不太适合与多页面的普通网站结合使用；
为什么要使用webpack:
1. 如果项目使用 webpack 进行构建，我们可以书写高级的ES代码，且不用考虑兼容性；
2. webpack 能够优化项目的性能；
3. 基于webpack，程序员可以把自己的开发重心，放到功能上；
根据官网的图片介绍webpack打包的过程
webpack官网

5. 在项目中安装和配置`webpack`

webpack 就是前端的一个工具，这个工具，已经被托管到了NPM官网上；

新建一个项目的空白目录，并在在终端中，cd到项目的根目录，执行npm init -y 初始化项目
装包：运行 cnpm i webpack webpack-cli -D 安装项目构建所需要的 webpack

打开 package.json文件，在 scripts 节点中，新增一个 dev 的节点：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },

在项目根目录中，新建一个 webpack.config.js 配置文件，内容如下：

// 这是 使用 Node 语法， 向外导出一个 配置对象
module.exports = {
  mode: 'production' // production    development
}

在项目根目录中，新增一个 src 目录，并，在 src 目录中，新建一个 index.js 文件，作为 webpack 构建的入口；
在项目根目录中，新增一个 dist 目录
在终端中，直接运行 npm run dev 启动webpack进行项目构建；

6. 初步使用`webpack`构建项目

使用上述步骤尝试打包src文件夹下的js文件

7. 实现`webpack`的实时打包构建

借助于 webpack-dev-sever 这个工具，能够实现 webpack 的实时打包构建；
运行cnpm i webpack-dev-server -D 安装包

打开package.json文件，把 scripts 节点下的 dev 脚本，修改为如下配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

修改 index.html 文件中的 script 的 src, 让 src 指向内存中根目录下的 /main.js
```
<script src="/main.js"></script>
```

8. 使用`html-webpack-plugin`插件配置启动页面

装包cnpm i html-webpack-plugin -D

在 webpack.config.js中，导入插件：

// 导入 html-webpack-plugin，从而帮我们自动把 打包好的 main.js 注入到 index.html 页面中
// 同时，html-webpack-plugin 可以把 磁盘上的 index.html 页面，复制一份并托管到 内存中；
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({
  // 传递一个配置对象
  template: './src/index.html', // 指定路径，表示 要根据哪个物理磁盘上的页面，生成内存中的页面
  filename: 'index.html' // 指定，内存中生成的页面的名称
})

把创建好的 htmlPlugin 对象，挂载到 plugins数组中：

// webpack 这个构建工具，是基于 Node.js 开发出来的一个前端工具
module.exports = {
  mode: 'development', // 当前处于开发模式
  plugins: [htmlPlugin] // 插件数组
}

9. 实现自动打开浏览器、热更新和配置浏览器的默认端口号

--open 自动打开浏览器
--host 配置IP地址
--port 配置端口号
--hot 热更新；最新的代码，以打补丁的形式，替换到页面上，加快编译的速度；

10. 打包处理非`js`文件

使用 ES6 模块化规范，导入样式表
默认，webpack 只能帮我们打包处理js类型的文件，非JS后缀名的文件，webpack默认处理不了。如果webpack 发现有处理不了的文件类型，则尝试去查找，是否安装了对应的loader，来处理这种文件类型；
如果有，则调用对应的loader加载器，帮webpack处理这种文件类型；当第三方 loader 处理完以后，会把处理的结果，返回给 webpack 进行打包合并；

如果没有合适的第三方loader则报错；

10.1 使用webpack打包css文件

运行 cnpm i style-loader css-loader -D

在webpack.config.js配置文件的导出对象上，新增一个module对象节点，在对象中，新增一个 rules数组，格式如下：

module: {
    // 所有非JS结尾的文件类型模块，都在这里进行配置
    rules: [
      // 文件处理规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] } // 配置 所有 CSS 文件的 处理 loader
    ]
  }

10.2 使用webpack打包less文件

运行 cnpm i less-loader less -D

在rules中新增一个规则：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 处理 less 文件的 loader

10.3 使用webpack打包scss文件

运行 cnpm i sass-loader node-sass -D

在 rules中新增一个规则：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 处理 scss 文件的loader

10.4 使用webpack处理css中的路径

运行 cnpm i url-loader -D

在 rules中新增一个规则：

{ test: /\.jpg|jpeg|png|gif|svg$/, use: 'url-loader' } // 处理 样式表中 图片路径的loader

10.5 使用babel处理高级JS语法

运行命令安装两套包：

第一个套命令：

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

第二套命令：

cnpm i babel-preset-env babel-preset-stage-0 -D

添加 rules规则：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } // 处理JS高级语法的loader ; 注意： 一定要添加 exclude 排除项，把 node_modules 目录排除

在项目根目录中，添加一个 .babelrc 配置文件：

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

10.6 处理字体文件路径问题

还是使用 url-loader 进行处理