一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
一.webpack简介
1. webpack是什么？
- Webpack是一种前端静态资源构建工具，一个静态模块打包器
- 在webpack看来，前端所有的资源文件（js/json/css/less…）都会作为模块处理
- 它根据模块的依赖关系进行分析，打包成相应的静态资源（bundle）
2. webpack的五个核心概念
- Entry 指示webpack的入口文件，以该文件为起点，进行文件打包，分析构建内部依赖图
- Output 告知webpack如何向硬盘写入编译文件。 注：即使存在多个entry入口，但只能指定一个output配置及命名规则
- Loader Loader用于对非js/json的源代码进行转换
- Plugins 插件可以解决loader无法实现的功能。插件范围包括，打包优化/重新定义环境变量
- Mode 设置mode参数，你可以启用webpack内置在不同环境下的优化
二.webpack的使用教程
环境要求：
- Nodejs 10版本以上
- webpack 4.26版本以上
前置知识：
- webpack能够编译打包js/json文件
- 能将es6模块化的语法转成浏览器能识别的语法。能压缩代码
- loader下载即可使用，plugins先下载再引入方可用
1.webpack初体验
1.1初始化环境
1）初始化package.json，指令 npm init
2）下载webpack,指令 npm install webpack webpack-cli –g
1.2 打包样式资源
样式文件需要多个loader去转换，以less为例
1）下载loader，css-loader style-loader less-loader，指令 npm i css-loader style-loader less-loader less –D
2）配置截图
1.3 打包html资源
1）使用插件html-webpack-plugin，插件使用需要先下载再引入，指令npm install --save-dev html-webpack-plugin
2）配置截图
1.4 打包图片资源
1）使用html-loader， url-loader，url-loader依赖file-loader，指令 包 npm install --save-dev html-loader url-loader file-loader
2）配置截图
1.5 打包其他资源
配置截图
1.6 配置devServer
1）配置截图
2)运行指令npx webpack-dev-server
以上就是使用webpack对常见文件类型的的处理
2.webpack生产环境配置
首先思考一个问题：生产环境配置和生产环境应当有什么差异？
总结
- 更快，平稳的运行
- 提取css文件/css兼容性/压缩css/js检查/js兼容性/js压缩
2.1 提取css为单独文件
1）下载plugin包 m install --save-dev mini-css-extract-plugin
2）配置截图
2.2 css 兼容性处理
1）下载loader包，npm install --save-dev postcss-loader postcss-preset-env
2）配置截图
2.3 压缩css
1）下载pluginr包 npm install --save-dev optimize-css-assets-webpack-plugin
2）配置截图
2.4 js语法检查
1）下载loader包
npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
2）配置截图
2.5 js兼容性处理
1）下载loader包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
2）配置截图
2.6 压缩js
修改mode为production，生产环境下会自动压缩js代码
2.7 html压缩
1）改配置文件HtmlWebpackPlugin 参数
2）配置截图
三.webpack的优化配置
第二篇：使用-webpack-定制前端开发环境终篇 预告： 3.1 缓存 3.2 tree shaking 3.3 codeSplite 3.4 lazy loading 3.5 pwa 3.6 多进程打包
