webpack

为会么要用webpack?

1. 首先是编译loader：针对jsx,ts,等的js通过babel编译，针对less,sass等的css编译.
2. 文件打包：一般通过打包压缩ugliyJS
3. 模块化：依赖，网络请示

webpack是一个前端资源动态加载/打包工具，会分析模块的依赖，并将模块根据指定规则生成静态资源。

webpack配置，webpack.config.js

首先webpack是js代码，js是需要在运行环境下才能运行的，那我们的webpack就是在nodejs(后端服务器)中运行的。

配置开头的require,用的就是node的内置模块,require是运行webpack时调用.
为什么不用import是因为，import是编译时调用，是解构过程，它也是es6,需要转换成es5再执行，import会转码成require.
webpack的配置文件内容是不经过编译的。

loader

loader是用来编译处理源文件的，比如es6,ts,less等都要通过loader编译成浏览器识别的语言。

loader的执行顺序：从下往上，从右往左。
loader的其它配置：

plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

plugins: [ 
    new HtmlWebpackPlugin({ title: '管理输出'}),//生成新的html文件，并把打包好的js文件引入
    new CleanWebpackPlugin(),//清理dist文件夹
]
 

SplitChunksPlugin分离包