本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack官网 https://www.webpackjs.com/
webpack基础
webpack的安装
注意：请先自行安装nodejs最新版的环境
-
初始化项目
npm init -y -
全局安装webpack
npm i webpack webpack-cli -g -
项目中安装webpack (推荐)
npm i webpack webpack-cli -D
全局安装webpack后，可以在控制台任何一个地方进行项目的打包构建；项目中安装webpack，不能直接使用webpack,可借助npx(npm5.2后出现npx，没有全局安转也可以使用webpack指令)；更推荐在项目中安装webpack，不推荐全局安装webpaxk，因为webpack是基于项目，为项目进行打包操作;
使用-D，不用-S，因为打包完毕，上线后就不需要了;
webpack的使用
webpack-cli
npm 5.2 以上的版本中提供了一个npx命令
npx 想要解决的主要问题，就是调用项目内部安装的模块，原理就是在node_modules下的.bin 目录中找到对应的命令执行
在项目中使用webpack命令：npx webpack
webpack4.0之后可以实现0配置打包构建，0配置的特点就是限制较多，无法自定义很多配置;推荐开发中常用的还是使用webpack配置进行打包构建；
webpack配置
webpack有四大核心概念:
- 入口(entry): 程序的入口js
- 输出(output): 打包后存放的位置
- loader: 用于对模块的源代码进行转换
- 插件(plugins): 插件目的在于解决 loader无法实现的其他事
- 配置webpack.config.js
- 运行
npx webpack
在配置文件中，output输出的路径必须是绝对路径，否则报错；
在node中如果涉及路径的操作，直接引入核心模块path；
const path = require('path')
module.exports = {
// 入口文件配置
entry: './src/index.js',
// 出口文件配置项
output: {
// 输出的路径，webpack2起就规定必须是绝对路径
path: path.join(__dirname, 'dist'),
// 输出文件名字
filename: 'bundle.js'
},
mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}
将webpack命令配置到package.json
将npx webpack命令配置到package.json的脚本中
在前面提到，打包命令是：npx webpack
webpack.config.js写配置文件，如果想指定其他配置文件，这个后面可以跟一些参数，进行--config的设置
npx webpack --config 新的配置文件
实际开发中，这样的配置文件是有2个甚至以上，比如一个生产打包指令，一个开发打包指令，上面的写法每次打包指令很长也很麻烦，最佳实现是：
- 配置
package.json - 运行
npm run build
//package.json
{
"name": "webpack-basic",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.dev.config.js"
},
"devDependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}
