概念
本 质上，webpack是一个现代 JavaScript 应用程序的 静态模块打包器(module bundler) 。
当 webpack 处理应用程序时，它会递归地构建一个 依 赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。
图片与文件处理
file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。
ES6内置方法和函数转化垫片cnpm i@babel/polyfill@babel/runtime -D
optimize-css-assets-webpack-plugin css优化压缩
uglifyjs-webpack-plugin js压缩
optimization: {splitChunks: { chunks:"all", //所有的chunks代码公共的部分分离出来成为一个单独的文件},},
当错误了，能够知道源代码在那一行 sourceMap 他是一个map关系，他知道dist/main。就是文件96行错误，对应src目录下index.js第一行
等需要的时候异步加载 js 需要安装 插件
cnpm install@babel/plugin-syntax-dynamic-import - D
配置 babelrc plugins
{"presets": ["@babel/preset-env","@babel/preset-react"],"plugins":["@babel/plugin-syntax-dynamic-import"] }
Prefetch是告诉浏览器这是一个在未来可能使用到的资源。 浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求
按需导入内容（摇树）
比如模块里面有个 a,b 两个模块，你只使用一个a 那么就导入a
webpack.config.js 配置
plugins:[ optimization:{ usedExports:true}]
package.json 配置 // 忽略掉css 按需导入。
"name":"lesson""sideEffects":["@babel/polly-fill","*.css"],"sideEffects":false,
