webpack4.0+简要

君不问高堂明镜

一、webpack简介
　　webpack 是当下十分流行的一款静态模块打包工具，将JS、CSS、HTML、图片等各种静态资源视为一个个模块，通过一个或者多个入口文件通过解析依赖关系生成一个依赖图，最终打包成一个或者多个bundles，webpack本身只能打包JS文件，但是通过配置的loader和plugin可以打包Css和Html等其他格式的文件，本文基于webpack5为基础的，其中webpack4前后版本区别很大，使用时需要注意区别版本。
　　webpack和glup、grunt的区别：webpack可以说是一种模块化解决方案，内嵌服务支持项目独立开发，同时可以打包单页面、多页面和提取公共模块以及处理图片文件。只打包被引用的文件，同时搭配强大的loader和plugin支持打包不同类型的语言，傻瓜式配置即可使用；grunt和glup则是基于任务式的打包工具，主要是用于编译CSS和JS，主要是用来合并、压缩和拷贝文件，不支持模块化打包。
二、配置详解
　　常用配置概览

1. module.exports = {
2. 　// 模式，webpack针对不同模式设置内部优化项，设置后会自动调起优化项
3. 　mode: 'development',
4.   // 入口 可以配置为相对路径或者绝对路径
5.   entry: './src/index.js',
7.   // 输出文件名称和路径,
8.   // path.reslove()返回一个绝对路径，__dirname当前文件的文件夹绝对路径
9.   output: {
10.     path: path.resolve(__dirname, 'dist'),
11.     // 打包输出文件名
12.     filename: 'main.js',
13.     // chunkFilename 指未被列在 entry 中，却又需要被打包出来的 chunk 文件的名称。一般来说，这个 chunk 文件指的就是要懒加载的代码
14.     chunkFilename: '[id].js',
15.     // 下次打包时将上次打包目录下的资源清空
16.     clean: true
17.   },
18.   // 加载器
19.   module: {
20.     rules: [],
21.   },
22.   // 插件
23.   pulgins: [],
24.   // 模式
25.   mode: 'development',
26.   //
27.   devtool: '',
28.   // 设置webpack如何解析模块，如别名、扩展名等
29.   resolve: {
30.     // 模块的后缀名，引入这些模块时不需要写扩展名，自动补充扩展名
31.     extensions: ['.js', '.json', '.css']
32.   },
33.   // 本地服务配置
34.   devServer: {
35.     // 指定端口
36.     port: 8000,
37.     // 是否开启模块热交换功能
38.     hot: true,
39.     // 是否自动在浏览器打开网页
40.     open: true
41.   },
42.   // 打包时排除编译该文件
43.   externals: {
44.     jquery: 'JQuery'
45.   },
46.   // 打包代码优化，进行公共代码提取，代码压缩，去除冗余代码等功能
47.   optimization: {
48.     splitChunks: {
49.       chunks: 'all',
50.       // 打包文件大于30kb时会被分割
51.       minSize: 30 * 1024,
52.       // 最大没有限制
53.       maxSize: 0,
54.       // 要提取的chunk最少被引用1次
55.       minChunks: 1,
56.       cacheGroups: {
57.         // node_modules下的文件会被打包到wendors中
58.         vendors: {
59.           test: /[\\/]node_modules[\\/]/,
60.           name: 'vendors',
61.           // 优先级
62.           priority: -10
63.         },
64.         // 提取公共组件
65.         commons: {
66.           name: 'chunk-commons',
67.           test: resolve('src/components'),
68.           minChunks: 3,
69.           priority:10
70.         }
71.       }
72.     }
73.   }
74. }

复制代码

　　
　　1. entry：打包入口，webpack打包从此处开始，通过解析依赖加载来构建依赖关系图，包含格式有包含格式有：string | [string] | object { : string | [string] } | (function: () => string | [string] | object { : string | [string] })，可以配置：

1. // 单入口单模块
2. entry: './index.js',
4. // 多入口单模块(多个入口一个出口)
5. entry: ['./src/Component1/main.js', './src/Component2/main.js'],
7. // 多入口
8. entry:{ com1: './src/Component1/main.js', './src/Component1/main.js' },
10. // 接受通过函数方式返回配置
11. entry: glob.sync('./src/**/main.js').reduce((acc, path) => {
12. 　　const entry = path.substring(path.indexOf('/src/') + 5, path.lastIndexOf('/main.js'));
13. 　　acc[entry] = path; return acc;
14. }, {}),

复制代码

　　2. output：打包文件输出配置，支持设置entry对应的name、id、hash、contenthash，需要注意filename和chunkFilename的区别

1. filename: "[name].[id].[contenthash].[hash:7].js",

复制代码

　　3. mode：模式，内嵌development和production以及none三种模式，针对开发和生产两种场景内置不同的优化项，比如压缩、去除冗余代码等
　　4. module：模块化配置，由于webpack只能解析JS，所以针对CSS、TS、SASS等无法解析的类型需要通过配置不同的loader进行处理编译。
　　　　4.1 style-loader: 将编译完成的CSS样式挂载到style标签上，实际使用中一般放在第一位，因为loader都是从右到左，从下往上执行

1. // 解析CSS
2. rules: [{
3.         test: /\.css/,
4.         use: ['style-loader']
5. }]

复制代码

　　　　4.2 css-loader：识别.css文件，处理CSS一般需要配合style-loader使用，否则样式不会生效，或者安装MiniCssExtractPlugin将文件单独打包

1. rules: [{
2.     test: /\.css$/,
3.     // use: ['style-loader', 'css-loader'],
4.     use: [MiniCssExtractPlugin.loader, 'css-loader'],
5.     // 可以排除对应文件夹的内容按照该rule进行打包
6.     exclude: /node_modules/<br>}]

复制代码

　　　　4.3  sass-loader处理.sass类型样式文件、postcss-loader用于补充CSS样式在各个浏览器内核的前缀，不需要手动写

1. // 打包SASS
2. rules: [{
3.         test: /\.scss$/,
4.         use: [
5.           'style-loader', 'css-loader', 'sass-loader', 'postcss-loader',
6.         ],
7.         include: '/sc/'
8. }]

复制代码

　　　　4.4 bable-loader: 将ES6+语法转换为ES5语法。需要配合@bable/core 和bable/preset-env来使用

1. // 打包JS
2. rules: [{
3.   test: /\.js$/,
4.   use: {
5.         loader: 'bable-loader',
6.         options: {
7.           presets: [[ 'bable/preset-env', { targets: 'defaults' } ]]
8.         }
9.   }
10. }]

复制代码

　　　　4.5 html-loader：将 HTML 导出为字符串。当编译器需要时，将压缩 HTML 字符串。
　　　　4.6 file-loader：处理文件资源，比如jpg、png等图片

1. // 处理图片资源
2. rules: [{
3.   test: /\.(png|jpg|jpeg)$/,
4.   use:[
5.         {
6.           loader: 'file-loader',
7.           options: {
8.                 name: '[name]_[hash:8].[ext]'
9.           }
10.         }
11.   ]
12. }]

复制代码

　　　　4.7 url-loader：同样是处理图片资源，与file-loader不同的是可以根据tip的大小决定是否将图片生成Base64保存到JS文件里，方便快速加载

1. // 处理图片资源
2. rules: [{
3.   test: /\.(png|jpg|jpeg)$/,
4.   use:[
5.         {
6.           loader: 'url-loader',
7.           options: {
8.                 name: '[name]_[hash:8].[ext]',<br>　　　　 // 当小于10kb时转换为base64打包到JS当中，否则保存为图片<br>　　　　 limit: 10240
9.           }
10.         }
11.   ]
12. }]

复制代码

　　　　4.8 其余还有vue-loader 加载和解析vue文件；eslint-loader 通过eslint检查JS代码；i18n-loader 加载多语言版本，支持国际化。
　　　　注：官方loader查看地址  https://webpack.js.org/loaders/
      5. plugins: 插件，和loader一样是webpack的支柱功能，主要解决loader无法解决的问题，需要使用某个插件时，首先需要安装，其次引入文件到本地中，最后才能使用
　　　　5.1 clean-webpack-plugin：打包前清理dist目录下的内容，避免再次打包时文件覆盖，之前的老文件遗留下来
　　　　5.2 copy-webpack-plugin：拷贝某个目录下的文件到dist下的某个目录，

1. new CopyWebpackPlugin([
2.   // 将src目录下的内容拷贝到dist/common下
3.   { from: './src', to: './common' }
4. ])

复制代码

　　　　5.3 html-webpack-plugin：生成html文件，以及自动引入打包好的css文件和JS文件(由于打包后的JS和CSS为了避免缓存都会动态生成文件名，所以每次打包手动引入比较麻烦)

1. // 单页面打包
2. new HtmlWebpackPlugin({ template: './index.html' }),
4. // 多页面打包
5. entry: {
6.   com1: './src/Component1/main.js',
7.   com2: './src/Component2/main.js'
8. },
10. plugins: [
11.     new HtmlWebpackPlugin({
12.           // 使用模板
13.       template: path.join(__dirname, 'src/component1/index.html'),
14.           // 打包后的文件名
15.       filename: 'com1.html',
16.           // 和入口文件的key值相对应
17.       chunks: ['com1']
18.     }),
19.     new HtmlWebpackPlugin({
20.       template: path.join(__dirname, 'src/component2/index.html'),
21.       filename: 'com2.html',
22.       chunks: ['com2']
23.     })
24. ],

复制代码

　　
　　　　5.4  mini-css-extract-plugin：打包好的样式一般通过style-loader会插入大页面中，但是如果想要实现CSS分离生成单独的文件，可以通过这个组件实现，但是需要配合前文中的loader使用

1. rules: [{
2.         test: /\.css$/,
3.         use: [MiniCssExtractPlugin.loader, 'css-loader']
4. }],
6. plugins: [
7.     new HtmlWebpackPlugin({ template: './index.html' }),
8.     new MiniCssExtractPlugin({
9.       filename: 'css/[name].css'
10.     })
11. ],

复制代码

　　　　5.5 自定义组件AddAuthorPlugin开发和使用：

1. // 在plugin文件夹下新增一个add-author-plugin.js文件
2. // 其中apply是内置方法
3. class AddAuthorPlugin {
4.   constructor(options = {}) {
5.     this.author = options.author;
6.     this.date = options.date;
7.   }
8.   apply(compiler) {
9.     compiler.hooks.compile.tap('AddAuthorPlugin', (compilation, callback) => {
10.     　　console.log('***');
11.     })
12.   }
13. }
15. module.exports = AddAuthorPlugin;<br><br>// 使用的时候<br>const AddAuthorPlugin = require('./plugin/add-author-plugin');<br><br>new AddAuthorPlugin({ author: '张三', date: new Date() });

复制代码

　　打包时如何调测自定义组件：
　　首先执行命令 node --inspect-brk .\node_modules\webpack-cli\bin\cli.js，然后在chrome浏览器中输入 chrome://inspect/#devices 回车后，点击 Open dedicated DevTools for Node 就可以进入调测模式，为了方便打断点，可以现在代码中设置debugger。详细步骤看录屏
 

　　　　注：官方plugin查看地址 https://webpack.js.org/plugins/
　　6. devtool：已不同的方式打包文件，配置项总共有十几种，为了区分开发环境和生产环境，主要介绍下面几种
　　　　6.1 开发环境推荐使用：
　　　　eval：每个模块都使用eval执行，速度非常快，但是不会显示正确的行号，所以没法进行调试
　　　　eval-source-map：，每个模式使用eval()执行，起初是缓慢的，但是重建的速度较快而且产生真是的文件，行号也被正确映射，产生的开发资源也是最优的。
　　　　cheap-eval-source-map：每个模块也是经过eval执行，但是只映射了行号没有列，只显示与eval类似的被转换的代码。
　　　　6.2 生产环境推荐使用：
　　　　none：不触发sourcemap，性能最佳
　　　　source-map：会生成一个完整的sourceMap作为一个单独的文件，为bundle添加了引用注释，因此开发工作知道如何找到它。
　　　　hidden-source-map：与source-map类似，但不添加引用注释。
　　7. devServer：方便前后端分离开发，一个本地服务
　　8. optimization：打包优化，可以实现提取公共代码，代码压缩以及去除冗余代码等功能
三、常见问题
　　1. chunk和bundle的概念：chunk是一个代码块，在构建的时候会根据入口文件和依赖关系生成多个chunk，bundle是指最后生成的文件，包含所有的chunk和模块
　　2. vue中的webpack是如何使用的：当前通过vue-cli脚手架创建的Vue项目都内置了webpack的打包功能，基本不需要独立配置即可使用，如果更改配置项则需要在vue.config.js中配置

1. // 两种方式自定义webpack配置
2. configureWebpack: {
3.     rules: [],
4.     plugins: []
5. },
7. configureWebpack: (config) => {
8.     config.devtool = 'source-map';
9.     config.plugins.push(***);
10. }

复制代码

　　3. webpack的优缺点和其他组件(Vite)的对比：
　　　　优点：模块化打包、零配置
　　　　缺点：随着项目变大，模块化增多，启动时会逐渐变慢，热更新也会变慢
　　　　Vite：由于打包原理和底层开发使用的语言不同，总体Vite打包和启动都要比webpack快很多，但是Vite生态不完善。
 

来源:https://www.cnblogs.com/codeOnMar/p/17460562.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！