初识webpack
webpack是帮助我们管理复杂项目的工具。
学习webpack会极大扩充前端开发视野。
webpack可以实现：
Tree shaking
懒加载
代码分割
webpack4速度更快，大型项目甚至可以节约90%构建时间。
内置了更多的默认配置，变更了许多API。
Loader
HMR
Create React App
Caching
Plugin
SourceMap
Vue cli 3.0
Shimming
WebpackDevServer
TreeShaking
CodeSplitting
babel
React
Library
Eslint
PWA
Vue
Mode
性能优化
多页应用
原理
PreLoading
PreFetching
环境变量
TypeScript
在项目内安装webpack
npm init -y：自动生成默认配置项package.json，不用一步一步选择
不推荐在全局安装，因为可能出现两个项目用的webpack版本不一样的情况
安装：npm install webpack webpack-cli -D(或者 --save-dev)
查看版本号：npx webpack -v :npx会帮你在当前项目的node_modules里找webpack
查看webpack所有历史版本：npm info webpack
指定版本号安装：npm install webpack@4.25.1 webpack-cli -D
打包项目：npx webpack index.js
如果后续创建了webpack.config.js配置文件之后，就可以直接运行npx webpack了。
在当前项目目录下创建：webpack.config.js：配置文件
用commonJS语法，module.exports导出，
下面的entry是简写，实际上是：
entry: {
main: './index.js'
}
// 引入node的核心模块
const path = require('path')
module.exports = {
// 入口文件，从index.js打包
entry: './index.js',
// 打包生成的文件放到dist文件夹下，__dirname是webpack.config.js所在的当前目录路径
output: {
// filename指定生成的文件名
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
}
}
// 使用npx webpack --config config1.js可以修改默认关联的配置文件由webpack.config.js变成config1.js，以config1.js为配置文件进行打包
// 在package.json中可以修改"script"标签后的配置，比如"bundle":"webpack"，这样在命令行输入npm run bundle也可以将项目进行打包打包输出的内容：
npm run bundle之后，终端命令行里会显示几行信息表示打包成功，Chunks是打包的id，Chunk Names就是entry下面的main。
如果没有设置mode: 'production'，命令行会提示警告，在entry之前加上mode的配置就不会再提示警告了，如果不想打包出来的文件压缩，可以把'production'改成'development'。'production'是默认压缩打包之后的文件的。
webpack核心概念
loader: webpack不能识别非js后缀结尾的模块，就需要通过loader让webpack识别出来，在配置文件中增添module配置项，使用'file-loader'(需要npm install file-loader)