为会么要用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拆散包