第一 webpack 正确安装方式
笔记：
首先安装webpack避免全局安装，应该在当前项目安装，否则会导致版本不一样会发生不一样的错误。
npx webpack -v 查看webpack安装的版本号和webpack-cli
npm info webpack 查看webpack版本号
注意：webpack4.25.1版本 配合webpack-cli3.1.2在npx webpack index.js 打包成功
webpack5.24.2版本在npx webpack index.js 不能打包成功
会出现意外的问题
第二 使用webpack的配置文件
1、 npx webpack 在npx webpack打包的时候，会在文件中找是否有默认文件webpack.config.js文件，如果有就根据默认文件的内容进行打包，自动生成一个静态文件
2、如果文件中没有默认文件类型命名如：webpack.config.js 则 打包方式如下： npx webpack --config 自定义webpack文件名
3、 的mode 有development 和production 一个是开发一个生产，开发模式是不会打包压缩，生产模式是会压缩的
第三 loader是什么？
1、loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标
1、test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
2、use 属性，表示进行转换时，应该使用哪个 loader。
onst path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
第四章 使用loader静态资源打包（图片篇）
使用loader指南 Loader
1、url-loader 如果加入limit时，对于小于文件大小限制，会返回成data URL 如果大于文件限制，会在dist文件中生成静态图片。如果不加入limit限制则会直接打包到bundle.js中，但是会有特殊情况，比如图片特别大的时候，会导致bundle文件也特别大，这样会导致http请求时间过长的问题
2、url-loader 通过文件大小限制，对于小的文件，直接打包到dist的bundle.js文件中，这样也进一步减少浏览器http请求，从而释放一些资源！
第四 使用loader静态资源打包（样式篇）
css-loader 要和webpack 版本进行良好兼容，负责打包会出错误，
css-loader 的最新版本（日期： 2021/02/28）（css-loader@5.1.0 ）不能兼容 webpack 4+ 的版本
截图如下：
1、 建议将 style-loader 与 css-loader 结合使用
2、style-loader 与 css-loader 的作用：
css-loader 是找到所有有关css文件，style-loader将css-loader生成的文件挂载到dom元素中，样式才能生效
postcss-loader
使用 PostCSS 加载和转译 CSS/SSS 文件
autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题，
具体操作：webpack配置autoprefixer
webpack.config.js中配置autoprefixer
解决webpack autoprefixer配置不生效
webpack.config.js
{
test: /\.scss$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
{ loader: 'postcss-loader' },]
}
添加postcss-loader和插件配置：
module.exports = {
plugins: [
require('autoprefixer')()
]
}
在package.json配置
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
第五：让plugins打包更便捷
plugins 是在打包的某一时刻处理
HtmlWebpackPlugin 会在打包结束后，自动生成html文件，并把打包生成js自动引入html文件中
clean-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
title: 'webpack app'
})
],
第六： Sourcemap 配置
sourcemap 是一个映射关系， 它知道dist 目录下main.js文件哪一行出错，然后对应的src下面的index.js文件中的哪一行
devtool
此选项控制是否生成，以及如何生成 source map。
，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
打包性能最快的是 eval
source-map 打包过后会生成 映射出新的文件.map文件
cheap-source-map 会将映射的文件 直接打包到main.js文件
cheap-module-source-map是涵盖loader的一下文件
在开发环境中 devtool可以使用：cheap-module-eval-source-map
在生产环境中devtool可以使用： cheap-eval-source-map
第七：使用webpackDevServer 提升开发效率
利用 webpackDevServer 启动本地服务器
devServer: {
contentBase: './dist',
open: true, // 默认打开浏览器
port: 8080
},
利用node 启动本地服务器
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const complier = webpack(config); // 进行编译
const app = express();
app.use(webpackDevMiddleware(complier, {
publicPath: config.output.publicPath
}))
app.listen(3000, ()=>{
console.log('server is start');
})
第八 Hot Moudle Replacement 热模块更新
热模块更新针对css样式的更新
devServer: {
contentBase: './dist',
open: true, // 默认打开浏览器
port: 8080,
hot: true, // 热模块更新触发条件
hotOnly: true // 启用热模块替换，而无需页面刷新作为构建失败时的回退。
},
Plungins 配置
new webpack.HotModuleReplacementPlugin()
第七 使用babel 处理Es6语法
import “@babel/polyfill”; 如果是写业务代码时，建议使用 presets ， 如果是写类库，polyfill可能会全局污染环境
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [['@babel/preset-env',
{
targets: {
chrome: "67", // 根据浏览器版本号限制进行打包，减少main.js的体积
},
useBuiltIns: "usage" // 根据代码需求，进行按需代码打包
}]]
// 诸如内置插件Promise，Set和Map那些会污染全局范围
plugins: [["@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"version": "7.0.0-beta.0"
}]]
}
}
},
第八 Tree Shaking 概念详解
Tress shaking 只支持 ES Module引用 不支持commonJs引用 是因为动态引入
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)
tree shaking操作：
通过 package.json 的 “sideEffects” 属性，来实现这种方式。
如果所有代码都不包含 side effect，我们就可以简单地将该属性标记为 false，来告知 webpack，它可以安全地删除未用到的 export。
注意，所有导入文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除
"sideEffects": [
"*.css"
]
第九 dev 和 prod模式下区分打包
将两个webpack新建两个文件进行分别打包
在 packjson文件中：
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js",
},
将webpack 配置文件进行分成 生产和开发文件，这样有利于代码管理，并且将webpack的公共方法抽离出来，新建一个webpack.common.js文件进行管理，
然后通过 webpack-merge 进行合并管理， 例如生产环境中代码如下：
const { merge }= require('webpack-merge');
const commonConfig = require("./webpack.common")
const prodConfig= {
mode: 'production',
devtool: 'cheap-module-source-map',
}
module.exports = merge(commonConfig, prodConfig)
第十 webpack 和 code Splitting
代码分割 和 webpack无关，
webpack中实现代码分割，两种方式
1、 同步代码：只需要在webpack.common.js中做optimization的配置
2、异步代码（import）： 无需做任务配置，会自动进行代码分割，放置到新的文件中
optimization: {
splitChunks: {
chunks: 'all'
}
},
第十一 SplitChunksPlugin 配置参数详解
optimization: {
splitChunks: {
chunks: 'all', // 在做代码分割时，只对异步代码生效 async 对同步代码和异步代码同时做代码分割 all, chunks和cacheGroups配合使用
minSize: 30000, // 大于30kb才做代码分割， 如果设置30000000就没有生效
maxSize: 0, // 超过多少kb进行对代码进行二次分割
minChunks: 1, // 大于多少数量不会再代码分割
maxAsyncRequests: 5, // 同时加载的模块数最多是 5个
maxInitialRequests: 3, // 入口文件加载时，入口文件引入的库，最多3个，多的话不会在进行代码分割
automaticNameDelimiter: '~', //文件名的连接符
name: true,
cacheGroups: { // 缓存组 打包同步的库，会通过vandor进行处理
vendors: {
test: /[\\/]node_modules[\\/]/, // 如果引入的库在node-module中的话，那么就会把那个库分割到vandors.js,
priority: -10, // 权重值越大，优先级就越高
filename: 'vendors.js'
},
default: { // 针对没有在node-module的库，进行默认代码分割
priority: -20,
reuseExistingChunk: true, // 指的是一个模块打包过，如果再次打包，则忽略掉模块，使用之前打包过的模块
filename: 'common.js'
}
}
}
}
第十二 Lazy Loding 懒加载 和 chunk 是什么？
懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
第十二 打包分析， preloading， prefetching
进行打包的分析网址： https://github.com/webpack/analyse
然后在packjson.js 中添加
webpack --profile --json > stats.json
预取/预加载模块(prefetch/preload module)
webpack v4.6.0+ 添加了预取和预加载的支持。
在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器：
prefetch(预取)：将来某些导航下可能需要的资源
preload(预加载)：当前导航下可能需要资源
Chrome性能分析工具Coverage使用方法
打开控制台–》点击‘Sources’–》ctrl+shift+p–》在命令窗口输入coverage–》在下边新出现的窗口中点击左上角刷新按钮。
第十三 css 文件代码分割
MiniCssExtractPlugin 为每个引入 CSS 的 JS 文件创建一个 CSS 文件 一般用于线上环境，在dev环境不支持hmr 热模块更新
css 代码分割详解 ：css 代码分割
第十四 webpack 与浏览器缓存 catching
我们可以通过替换 output.filename 中的 substitutions 设置，来定义输出文件的名称。webpack 提供了一种使用称为 substitution(可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。其中，[contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时，[contenthash] 也会发生变化。
output: {
filename: '[name].[contenthash].js', // contenthash 是为了区分浏览器缓存,添加的hash值进行区分
chunkFilename: '[name].[contenthash].js'
}
第十五 Shimming 预置依赖
webpack compiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些 third party(第三方库) 可能会引用一些全局依赖（例如 jQuery 中的 $）。因此这些 library 也可能会创建一些需要导出的全局变量。这些 “broken modules(不符合规范的模块)” 就是 shimming(预置依赖) 发挥作用的地方。
注意：我们不推荐使用全局依赖！webpack 背后的整个理念是使前端开发更加模块化。也就是说，需要编写具有良好的封闭性(well contained)、不依赖于隐含依赖（例如，全局变量）的彼此隔离的模块。请只在必要的时候才使用这些特性。
第十六 渐进式网络应用程序（PWA）
渐进式网络应用程序(progressive web application - PWA)，是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。PWA 可以用来做很多事。其中最重要的是，在**离线(offline)**时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。
第十七 使用webpackdevServer 实现请求转发
devServer.proxy
如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。
proxy:{
"/react/api": 'http://www.dell-lee.com'
}
2662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
