Webpack配置

webpack是什么

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler），当webpack处理应用程序时，它会递归的构建一个以来关系图（dependency graph），其中包含应用程序需要的每一个模块，然后将所有这些模块打包成一个或多个bundle

安装

webpack是一个使用Node.js实现的一个模块化代码打包工具，所以我们需要先安装webpack，安装前需要先搭建好Node.js环境

npm install -S webpack webpack-cli   注：不推荐全局安装

安装后查看版本号：./node_webpack/.bin/webpack -v 如果运行时报错（显示脚本错误），那么出现这个问题的原因可能是：PowerShell执行策略的问题
解决方法：
1.右击VSCode图标，选择以管理员身份运行；
2. 在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；
3. 这时执行set-ExecutionPolicy RemoteSigned；
4. 此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行

打包配置

webpack命令在运行的时候，默认会读取运行命令所在的目录下的webpack.config.js文件

Mode

配置文件打包后的样式，有三种模式：production（默认压缩版）、development（未压缩）、none（空）

entry

指定打包入口文件，有三种不同的形式：string、object、array

String形式：一对一，一个入口、一个打包文件

array形式：多对一，多个入口、一个打包文件

object形式：多对多，多个入口、多个打包文件

Output

处理打包后的文件位置
使用前先引入path模块

Loaders

webpack中非常重要的核心之一 ，它是用来处理非js类型的模块，不同类型的模块的解析就是依赖不同的loader来实现的

当webpack碰到不识别的模块时，webpack会在配置的module中进行该文件解析规则的查找

• rules就是我们为不同的文件定义的解析规则对应的loader，它是一个数组

• 每一种类型规则通过test选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配文件后缀类型

• use针对匹配到文件类型，调用对应的loader进行处理

1. raw-loader：用来处理纯文本内容
   使用前首先安装raw-loader：npm install raw-loader --save-dev
   安装完成后在webpack.config.js中进行配置，配置成功后运行即可

2. markdown-loader：用来将markfown转为html

   使用前首先安装 markdown-loader与html-loader，由于mark输出的是HTML，因此与html-loader一起使用，而html-loader就是把mark解析后的html解析为js能够识别的
   npm install markdown-loader html-loader
   安装完成后在webpack.config.js中进行配置，配置成功后运行即可

3. file-loader：（处理图片）将文件发送到输出文件夹，并返回（相对）URL
   使用前首先安装file-loader：npm install file-loader --save-dev
   安装完成后在webpack.config.js中进行配置

   然后在运行后可能会出现显示的是一个裂开的小图标，这种情况的话需要在添加一个options来对它的路径进行配置

   options也可以通过outputPath对打包后的文件路径进行修改

4. url-loader：可以处理file-loader所有的事，但是遇到图片格式的模块，可以选择性的把图片转成base64格式，并打包到js中，对小体积的图片合适，大图片不合适

   使用前首先安装url-loader：npm install url-loader --save-dev

   配置与file-loader一样，不同的是多了一个limit属性来限制图片的大小

5. css-loader：分析css模块之间的关系，并合成一个css

6. Style-loader：把css-loader生成的内容，用style标签挂载到页面的head中

   它们两个同时使用，先通过css-loader处理，然后把处理后的css字符串交给style-loader进行处理，把css-loader生成的内容，用style标签挂载到页面的head中

   使用前首先安装css-loader与style-loader：npm install css-loader style-loader --save-dev

   也可以通过options对它的css进行配置

Plugins

webpack中另一个核心内容，它主要是扩展Webpack本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的文件进行压缩

• HtmlWebpackPlugin
  在打包结束后，自动生成一个 html 文件，并把打包生成的js模块引入到该 html中

  使用前先安装 npm install --save-dev html-webpack-plugin

  在进行配置前先在webpack.config.js中引入，引入后直接配置

• Clean-webpack-plugins ：删除（清理）构建目录

  使用前先安装 npm install --save-dev clean-webpack-plugin

  在进行配置前先在webpack.config.js中引入，引入后直接配置

• mini-css-extract-plugin：提取css到一个单独的文件中

  使用前先安装：npm install --save-dev mini-css-extract-plugin

  使用时先替换style-loader，然后在进行配置

SourceMap

我们实际运行在浏览器的代码是通过‘webpack’打包合并甚至时压缩混淆过的代码，所生成的代码不利于我们的调试和错误定位，我们可以通过‘sourceMap’来解决这个问题，‘sourceMap’本质是一个记录了编译后代码与源代码映射关系的文件，我们可以通过‘webpack’的‘devtool’选项来开启‘sourceMap’

WebpackDevServer

每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装‘webpack-dev-server’来解决

首先进行安装：npm install --save-dev webpack-dev-server

安装完成后在package.json中的script中添加命令

继续在webpack.config.js中进行配置

配置完成后运行npm run serve，如果报错如下图：

是因为webpack-cli版本4，删除了webpack-cli/bin/config-yargs文件，所以我们只需要卸载当前版本，安装3版本即可
卸载：npm uninstall webpack-cli
安装：npm install webpack-cli@3.3 -S
启动服务器后，‘webpack’不会把打包后的文件生成到硬盘真实目录中了，而是直接存在内存中（同时虚拟了一个存放目录路径），后期更新编译打包和访问速度大大提升，注：当webpack.config.js修改后都需要重新启动

当我们服务器启动后会看到页面会打印出：Live Replacement enabled，并且当你在修改数据时它会发生变化

为了避免每次进入后都需要手动输入路径跳转页面的问题，我们可以给它添加index属性来指定进入页面后显示的内容。注：为了避免影响用户体验index和openPage一块使用

Hot Module Replacement

当之前的代码有变化时，我们使用的‘Live Replacement’也就是刷新整个页面，虽然这样使我们省去了手动刷新的麻烦，但是这样即使我们只修改了很小的内容它也会刷新整个页面，无法保持页面的操作状态。‘HMR’随之就出现了，它主要就是进行局部更新，也就是不刷新整个页面，只更新变化的部分

使用时直接在devServer中配置

Proxy

当下前端的开发都是前后端分离开发的，前端开发过程中代码会运行在一个服务器环境下(如当前的 WebpackDevServer)，那么在处理一些后端请求的时候通常会出现跨域的问题。WebpackDevServer 内置了一个代理服务，通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer 内置的代理发送的请求属于后端 - node，不受同源策略限制)，具体如下：

先安装koa 与 koa-router：npm install koa koa-router

然后在创建一个服务器

然后在devServer中进行配置，设置访问密令为/api，路径为8787

在a.js中通过异步的方法访问路径为你设置的密令/api

在index.js中导入a.js中，并在点击时调用