Webpack

webpack

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

安装

 webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。所以，我们需要先安装 webpack，安装之前需要搭建好 Node.js 环境
 安装:npm install -D webpack webpack-cli
   webpack:webpack代码
   webpack-cli:提供webpack命令,工具
 安装之前先创建package.json文件

使用

 查看版本：./node_modules/.bin/webpack -v

 可以编辑 package.json 的 scripts 来简化输入

 scripts 中使用 test、start、restart、stop 命名的时候，可以在调用的时候省略 run，即直接 npm start

 还有一种更简便的方式,通过npx可以定位到./node_modules/.bin/ 目录下
 npm5.2+ 增加，如果没有，可以使用 npm i -g npx 来安装

打包模块

入口文件
 入口文件就是我们项目中加载的第一个文件，其它文件都是通过 import 等方式引入的，webpack 会从我们指定的入口文件开始分析所有需要依赖的文件，然后打包成一个完整文件
打包命令
 ./node_modules/.bin/webpack 入口文件路径
 该命令会使用 webpack 默认的一些配置对模块文件进行打包，并把打包后的文件输出到默认创建的 ./dist 目录下，打包后的文件名称默认为 main.js
 模块文件打包以后，就可以在不支持 es6 模块语法的浏览器环境下引入使用了

打包配置

 除了直接通过命令的来打包,还可以创建一个 webpack.config.js 的配置文件来实现更方便和强大的功能(推荐)
 webpack 命令在运行的时候，默认会读取运行命令所在的目录下的 webpack.config.js 文件，通常我们会在项目的根目录下运行命令和创建配置文件,也可以通过 —config 选项来指定配置文件路径
 配置文件中：

 1.mode
  配置打包出的文件样式
  参数有三种：production压缩;development未压缩;none

 2.entry
 指定打包入口文件,有三种不同的形式：string | object | array
 3.output
 打包后的文件位置,对象类型
 path属性,需要require引入path来使用,参数1为__dirname,根目录;参数2为生成的文件夹名称
 filename用于输出文件的文件名
  单文件出口：filename: "***.js"
  webpack 内置的变量占位符：filename: "[name].js"

深入

 在 webpack 中，有一个很重要的特性：模块不仅仅只是 js 的文件，webpack 可以把任意文件数据作为模块进行处理，包括：非 js 文本、css、图片等等
 但是 webpack 默认情况下只能处理 js 模块，如果需要处理其它类型的模块，则需要使用它提供的一些其它功能

 loaders：webpack 中非常核心的内容之一，用于非 js 类型的模块处理，不同类型的模块的解析就是依赖不同的 loader 来实现的
 plugins：webpack 中另外一个核心的内容，它主要是扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等

loaders
 当 webpack 碰到不识别的模块的时候，webpack 会在配置的 module 中进行该文件解析规则的查找
 rules 就是我们为不同类型的文件定义的解析规则对应的 loader，它是一个数组
  每一种类型规则通过 test选项来定义，通过正则进行匹配，通常我们会通过正则的方式来匹配
 文件后缀类型
  use 针对匹配到文件类型，调用对应的 loader 进行处理

 1.raw-loader
  安装：npm install --save-dev raw-loader
  在webpack.config.js中配置：

 2.markdown-loader
  将 Markdown 转译为 HTML
  需要配合html-loader(导出 HTML 为字符串，需要引用静态资源)使用

 注：执行多个loader时,执行顺序是从后往前
 3.file-loader
  将文件发送到输出文件夹，并返回（相对）URL



 4.url-loader
  可以处理理 file-loader 所有的事情，但是遇到图片格式的模块，可以选择性的把图片转成
  base64 格式的字符串，并打包到 js 中，对⼩体积的图片⽐较合适，⼤图⽚不合适

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

 6.style-loader
  将模块的导出作为样式添加到DOM中
  与css-loader一起使用