这是我参与[第四届青训营]笔记创作活动的第十一天。

为什么要学习Webpack?

理解前端“工程化”概念、工具、目标
一个团队总要有那么几个人熟悉Webpack,
某种程度上可以成为个人的核心竞争力
高阶前端必经之路

什么是Webpack

webpack主要是打包，所以其核心存在两个部分，入口和出口，你可以把webpack加工想象成香肠加工厂，就是活猪进去，香肠出来的那种，但是如果每次加工都需要员工亲力亲为，那多麻烦那，所以我们考虑到了自动化配置。webpack存在功能类似的配置文件，让webpack通过配置，全自动的执行我们需要的编译操作。
webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js ，

总结一下，webpack共分为四个部分，这个概念一定要记好，本堂课就是围绕这四个配置进行展开的 :

入口 * 出口 * 加载器 * 插件

本质上是一种前端资源编译、打包工具

多份资源文件打包成一个 Bundle
支持 Babel、Eslint、TS、CoffeScript、Less.
Sass
支持模块化处理css、图片等资源文件一支持HMR＋开发服务器-支持持续监听、持续构建
支持代码分离
支持Tree-shaking-支持Sourcemap

使用Webpack

核心流程

模块化+一致性 1 -多个文件资源合并成一个，减少http请求数

2 -支持模块化开发

3 -一支持高级JS特性

4 -支持 Typescript:CoffeeScript方言

5 -统一图片、css、字体等其它资源的处理模型

6 - Etc.. .

关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个or 若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

配置总览

按使用频率:

entry/output
'module/plugins`
'mode`
'watch/devServer /devtool

处理CSS

接入Babel

生成HTML

自动生成HTML文件

const path = require(' path')
const HTMILWebpackPlugin = require( "html-webpack-plugin ")
module.exports ={
entry: '.lsrc/index',mode: "development",devtool: false,
output: {

filename: ' [name].js',
path: path.join(_ dirname, "./dist')},
plugins: [new HTMLWebpackPlugin(》]9