前言：webpack作为现在前端最主流的打包工具，几乎成为了前端开发必会的东西了。今天就来说一说webpack最基础的配置把
1、webpack的安装
- 全局安装： npm install webpack webpack-cli -g
意思是同时全局 安装webpack 和webpack的脚手架，这样会默认下载webpack的最新版本。 - 本地安装：npm install webpack webpack-cli -D
- 需要注意的是：在全局安装之后 我们真正使用 webpack 还需要本地安装 , -D是添加到开发依赖 不属于生产依赖， 开发依赖也就是说只是在项目开发过程中 会 用到它， 生产依赖 也就是说 等到项目上线了之后都会用到它。
- 重要结论：
1、webpack能处理 js/json资源 不能处理css/img等其他资源
2、生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
3、生产环境比开发环境多一个压缩的js代码
2、webpack的五个核心概念
1、Entry
入口(Entry) 指示 Webpack 以哪个文件为入口起点卡死打包，分析构建内部依赖图。
2、Output
输出(Output)指示 Webpack 打包后的资源 bundle 输出到哪里去，以及如何命名；
3、Loader
Loader 让 Webpack 能够去处理那些非JavaScript文件 (webpack自身只能理解JavaScript)
4、Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等。
5、Mode
模式(Mode)指示 Webpack 使用相应模式的配置
3、webpack内置的一个开发服务
安装命令
npm install webpack-dev-server -D (相当于是开启一个本地服务)
安装了这个才能 配置 npm run serve 启动本地服务
上面package.json文件中那个 serve 是自己配置的，也就是说不一定要写 serve 写其他的也可以，比如写个 dev 也行；
当配置了上面那些服务后，执行npm run serve 就相当于执行了 npx webpack-dev-server
–open 是运行项目时自动打开浏览器
webpack 打包输出
1、配置
这个也需要在 package.json中配置 在scripts 脚本中 配置一个 build命令，当然，也是任意取名字都行，这里只是见名思意就叫build；
当执行了 npm run build 就相当于执行了 webpack --config webpack.config.js 也就是相当于执行了webpack的配置文件；
2、打包输出的路径
需要注意的是，上面需要引入 node 中的一个path路径模块 ，因为 output下面的 path 需要的是绝对路径
需要在上面写一行引入 path 的代码：
let path = require('path'); // 引入 node 中的path模块
然后引入绝对路径，要用到 path 模块中的 resolve() 方法；
path: path.resolve(__dirname,'dist') //路径必须是一个绝对路径，打包后的文件放在哪;
3、打包后，指定文件目录，运行静态服务，打开网页
- 首先需要安装插件： npm install html-webpack-plugin
这个插件是 在打包时 将模板html 文件 与dist目录下的bundel.js 整合起来，然后再生成一个 index.html 文件 放在 dist 目录下
意思是，在我们打包时，将会以我们指定的src文件中的 index.html 为模板 在与 bundel.js 整合起来，然后再生成一个 index.html 文件 放在 dist 目录下
plugins:[ // 数组中放着所有的 webpack 插件
new HtmlWebpackPlugin({
template:'./src/index.html', // 以这个作为模板
filename:'index.html', // 打包出来的index.html文件
minify:{ // 配置打包时的优化
removeAttributeQuotes:true, //删除属性的双引号
collapseWhitespace:true, // 打包后变成一行显示
},
hash:true // 显示哈希戳
})
]
plugins数组就是专门用来 放有关插件的，其实webpack也就是各种插件堆叠起来的
4、打包后运行的静态文件
也就是说，当我们项目打包后，运行的时候，就会以我们当前指定的这个 目录 运行我们的静态服务，打开的网页也就是这个目录下的 index.html 文件
这是我刚学webpack时，所遇到的一些知识点，也让我知道了以前在 vue-cli 项目中为什么 npm run serve 之后就能运行项目了，原来它其中的知识点涉及到的还是非常多的，总体来说，webpack学起来还是有点难度的，首先你必须要有一些node的基本的知识，还要有点 es6 的知识。如果有什么地方写错了，还希望各位大佬指出来！
