什么是webpack

模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

为什么使用webpack

现在是网络时代，在我们的生活中网络成为了必不可少的，我们在网络上可以看到很多漂亮的功能丰富的页面，这些页面都是由复杂的JavaScript代码和各种依赖包组合形成的，那么这些都是怎么*组合在一起的呢，组合在一起需要花费多少精力呢，经过漫长发展时间现前端涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便。

  • 模块化 可以使复杂的程序细化成为各个小的文件
  • 预处理器 可以对Scss，less等CSS预先进行处理

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。
当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口 开始，webpack 会递归的构建一个依赖关系图，这个依赖图包含着应用程序中所需的每个模块，然后将所有模块打包为少量的 bundle —— 通常只有一个 —— 可由浏览器加载。

入口 entry

  1. entry: {//入口文件 |多入口文件<br />        main: path.join(__dirname, 'src/bundle.js')<br />    },<br />//单入口文件可以是字符串格式或者数组

出口 output

  1. output: {//出后文件 name:原来名字|hash:哈希值<br />        filename: '[name][hash].js',<br />        path: path.join(__dirname + '/dist')<br />    },

模式 mode

提供mode 配置选项，告知webpack 使用对用的模式内置优化。
mode的默认配置就是production，就是如果你不配置mode默认值就是生产模式 string格式
开发模式：development
生产模式：Production
禁用模式：none
mode：’development’ 

        module: {<br />        rules: [<br />          <br />                 ],<br />            }<br />这个数组中的每个元素对应一个规则，这个规则可以是一个字符串，也可以是一个对象。实际应用中，往往会将其配置成一个**对象**。就像下面这样：<br />里面可以配置需要的各种loader<br />图片配置可查看：[https://www.jb51.net/article/161272.htm](https://www.jb51.net/article/161272.htm)<br />  module: {<br />        rules: [<br />          {<br />            test: /\.(png|jpg|gif)$/i,<br />            use: [<br />              {//处理图片格式<br />                loader: 'url-loader',<br />                options: {<br />                    limit: 8192,//超过规定的大小自动到file解析<br />                    fallback: 'file-loader',<br />                },<br />              },<br />            ],<br />          },<br />        ],<br />      },

解析resolve

这些选项能设置模块如何被解析。webpack 提供合理的默认值，但是还是可能会修改一些解析的细节。关于 resolver 具体如何工作的更多解释说明，请查看：
resolve: {//可以省略的后缀名
extensions: [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’],
alias: {//解析别名‘
// ‘vue$’: “vue/dist/vue.esm.js”,//如果是组件形式的vue输出的话需要加上这段话
“@”: path.resolve(__dirname, ‘src/‘),
},
},

插件Plugins

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活webpack.config.js中配置plugins，plugins是一个数组
plugins: [//清楚重复文件
new CleanWebpackPlugin(),
],

开发服务器DevServer

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
下载 npm install —save-dev webpack-dev-server
devServer:{
contentBase: ‘./build’, // 设置服务器的基本目录
host:’localhost’, // 服务器的ip
prot:8080, // 端口
open: true // 自动打开页面
}

优化(Optimization)

UglifyJS Webpack Plugin

optimization: {
minimizer: [
new UglifyJsPlugin({//优化压缩代码大小
test: /.js(\?.*)?$/i, //测试匹配文件,
include: /\/includes/, //包含哪些文件
excluce: /\/excludes/, //不包含哪些文件
],
},

placeholders占位符

[name] 原文件的文件名
[ext] 原文件的尾缀名
[hash] md5加密后的值