WEBPACK基础配置【总结】

webpack打包原理：
webpack是一个js应用程序的静态模块打包工具，当webpack处理应用程序时，它的内部构建一个依赖图，会映射项目中需要打包的每个模块，并生成一个或多个bundle包。因此我们会在web pack.config.js中配置各种打包规则，那其中配置打包环境的是mode，可以配置打包的是开发环境还是生产环境；配置打包入口的是entry，一般情况配置的是单页面入口，那如果想配置多页面入口可以以对象的形式进行配置；配置打包出口的是output，可以根据hash值来配置文件名称；在module中配置加载器，如babel- loaded等，一般用于实现代码编译；plugin可配置插件，处理压缩等；resolve为解析器，其中可在alias别名中配置@替代src路径；optimization可设置优化项进行js和css压缩；devServer配合webpack-dev-server启动本地web服务器并实现跨域处理。
proxy跨域代理原理：
客户端向服务器发请求，代理服务器与客户端的域名、协议、端口号相同为同源，因此可以发送请求给代理服务器，然后请求数据通过代理服务器转发到真正的服务器获取数据，服务器与服务器之间没有域的限制，所以可将数据返回给代理服务器，然后代理服务器将数据转发给客户端。
强缓存原理：
客户端基于GUI线程进行渲染，遇到img、script、link都会单独开辟新的http网络请求，并去服务器获取相关资源，返回给客户端html相关代码，客户端一旦发现对应响应头字段信息，自己将缓存资源存储到本地，并且缓存相关标识，如果需要设置强缓存，需要服务器返回资源的同时在响应头中设置expires和cache-controls，设置强缓存后如果要保证服务器资源更新同时本地资源也更新，那入口文件index.html一定不能设置强缓存，需要通过打包文件名不同进行更新其内容。

// 在webpack.config.js文件中
const path = require('path') // node内置的路径处理模块
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包编译的html，对打包后的html进行压缩处理
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 自动删除之前打包的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将css文件提取到单独的文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩css文件
const TerserWebpackPlugin = require('terser-webpack-plugin') //  压缩js文件

// 多页面入口需要的配置
// 前提我们设置的名字和src、public入口页面模版名字相同，打包后的文件也基于命名
const pageArr = ['index','login']
const entryObj = {}
const htmlPlugin = []
pageArr.forEach((chunk)=>{
   entryObj[chunk] = `./src/${chunk}.js`
   htmlPlugin.push(
      new HtmlWebpackPlugin({
         template:`./public/${chunk}.html`, // 指定页面模版
         filename:`${chunk}.html`, // 打包后文件名称
         minify:true, // 视都压缩
         chunks:[chunk] // 指定导入资源的名称
      })
   )
})


module.exports = {
    // 基础设置
    mode: 'production', // 打包模式
    entry: './src/index.js', // 单页面入口
    // 多页面入口
    // entry: entryObj
    output:{
       filename:'main.[hash:8].js',
       // [hash:8]为打包后的文件创建哈希值，代码被修改生成文件名中哈希值也变化，有助于强缓存的设置
       path:path.resolve(__dirname,'./dist')
    },
    // 优化项，设置压缩方式
    optimization:{
       minimizer: [
          new CssMinimizerWebpackPlugin(),
          new TerserWebpackPlugin()
       ]
    },
    // 使用插件
    plugins:[
       new HtmlWebpackPlugin({
          template:'./public/index.html',
          filename:'index.html',
          minify:true
       }),
       new CleanWebpackPlugin(),
       new MiniCssExtractPlugin({
          // 打包后的css文件名称,单独提取到css文件中，并自动导入html文件
          filename:'main.[hash:8].css'
       })
    ],
    // dev-server
    devServer:{
       host:'127.0.0.1', // 域名
       port:3000, // 端口号
       open:true, // 自动打开浏览器
       hot:true, // 热更新
       compress:true, // 开启服务器端的gizp压缩
       proxy:{ // 跨域处理
          '/api':{
             target:'http://www.com.wd', // 代理真正的服务器地址
             pathRewrite:{'^/api':''}, // 地址重写，主要用于区分不同代理前缀，从最后请求的真正地址中移除
             changeOrigin:true, // 修改请求头中origin源信息
             ws:true // 支持webscoket通信机制
          }
       }
    },
    // loader加载器：执行顺序 上->下 右->左
    module:{
       rules:[{
          test: /.\(css|less)$/, // 基于正则匹配，我们需要处理的文件
          use:[{
             MiniCssExtractPlugin.loader, // 抽离css代码
             // "style-loader", // 把css以内嵌式导入页面
             "css-loader", // 处理特殊语法
             // 在package.json文件中设置browserslist浏览器兼容性
             // 在postcss.config.js文件中设置插件导入autoprefixer设置css3样式问题
             "postcss-loader", // 配合autoprefixer&browserslist给css3属性设置前缀
             "less-loader" // 将less编译为css
          },{
             // 在babel.config.js文件中将es6转化为es5，@babel/preset-env
             test: /.\js$/,
             use:["babel-loader"],// 有关js兼容性处理，将es6转化为es5，使用babel-loader、@babel/preset-env、@babel/core、@browserslist
             // es6内置api的兼容，导入@babel/polyfill，对常见内置api进行重写，但对fetch、reflect没有重写
             exclude: /node_modules/ // 可优化打包速度，忽略node_modules
          },{
             // 图片引入静态资源地址进行渲染，遇到静态资源图片会重新向服务器发送请求，然后编码再进行渲染，图片速度会较慢
             // 将图片转化为base64格式，可以直接不用向服务器发送请求，这样图片渲染速度会加快
             // js中处理静态资源图片，需要基于ESModule规范导入，这样打包才会对此图片进行打包，如果写相对地址打包后地址会不一样，找不到图片
             test: /\.(png|jpe?g|gif)$/i,
             type:'javascript/auto', // webpack5需要的
             use:[{
                loader: 'url-loader',
                options:{
                   limit:200*1024, // 将指定大小内的图片转化为base64
                   esModule:false,
                   name: 'images/[name].[hash:8].[ext]' // 编译后没有转化为base64的图片，编译输出的路径和名称
                }
             }]
          }]
       }]
    },
    // 设置打包最大资源大小
    performance:{
       maxAssetSize:100*1024*1024,
       maxEntrypointSize:100*1024*1024
    },
    // 解析器
    resolve:{
       // @以后代表的就是src这个路径
       alias:{ '@':path.resolve(__dirname,'./src') }
    }
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120