webpack配置和打包性能优化

文章目录

webpack基础配置
- loader
- plugin
- [loader 和 plugin 的区别](#loader 和 plugin 的区别)
- devServer
- 打包性能优化
- - - 1、按需引入组件
    - [2、externals 属性](#2、externals 属性)
    - 3、给定文件匹配范围
    - [4、noParse 属性](#4、noParse 属性)
    - [5、cacheDirectory 缓存属性](#5、cacheDirectory 缓存属性)
    - [6、happyPack 多个子进程并行](#6、happyPack 多个子进程并行)

webpack基础配置

mode:development：设置webpack的运行模式，开发模式下代码不压缩，生产模式下会启用自动优化；

entry:'./src/index.js'：入口文件，打包从此开始；

output:{ filename:'bundle.js' , path:'path.resolve(__dirname,''dist)'}：配置打包后文件输出位置和名称，path.resolve用于获取绝对路径；

module.rules：配置各类文件的处理规则，test属性用户匹配文件路径，use属性指定使用的loader；

loader

loader：用于转换模块的工具。主要用于文件内容的转换。

babel-loader处理js文件，将es6+代码转换为es5，通常与@babel/preset-env一起使用；
css-loader和saas-loader处理css和sass文件，miniCssExtractPlugin.loader将css提取为单独文件；
style-loader将css插入到dom的<style>标签中去；
file-loader处理文件（如图片、字体），并返回文件的url；
url-loader处理图片文件，8kb以下的图片转为base64,大于8kb的图片则拷贝到输出目录；
自定义loader：实质上是一个函数，接受源文件内容作为输入，并输出处理后的内容。可以通过this.callbak返回结果；
javascript 复制代码
```
module.exports = function(source){	//自定义loader:将文件内容中的'my'替换为'我的'
    const result = source.replace(/my/g,'我的');
    return rusult;
}
```

plugin

plugin：用于扩展webpack功能的工具，可以在webpack构建过程中执行更复杂的任务，如打包优化、资源管理、环境变量注入等。Plugin主要用于处理构建过程中的各种任务。

CleanWebpackPlugin在每次打包前清理输出目录，防止旧文件残留；
HtmlWebpackPlugin根据模板生成Html文件，并自动注入打包后的js文件等；
MiniCssExtractPlugin将Css提取到单独的文件中；
DefinePlugin创建全局变量，在编译时进行替换；
TerserPlugin用于压缩js代码，主要在生产环境中使用；

自定义Plugin：plugin是一个类，包含apply方法，apply接受一个complier对象，通过这个对象可以钩入webpack的各个构建阶段；

javascript 复制代码

class MyPlugin{		//编译完成后输出提示
    apply(compiler){
        compiler.hooks.done.tap('MyPlugin',(stats)=>{
            console.log('编译完成！')
        })
    }
}

loader 和 plugin 的区别

loader 是文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程；能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin即为插件，是一个扩展器，丰富webpack本身，增强功能，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。插件赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事
loader 运行在打包文件之前
plugins 在整个编译周期都起作用

devServer

Webpack DevServer 是一个开发工具，它可以提供一个简单的 web 服务器，并且能够实时重新加载
contentBase：告诉服务器从哪里提供内容，默认情况下，服务器会使用当前执行目录。
compress：告诉服务器启用 gzip 压缩。
port：指定要监听请求的端口号。
open：告诉服务器自动打开浏览器。
hot：启用模块热替换(Hot Module Replacement)。

打包性能优化

1、按需引入组件

例如引入 element-ui ，用到哪些组件就引哪些

javascript 复制代码

import {Button,Dialog} from 'element-ui';
Vue.use(Button); // 按钮组件
Vue.use(Dialog); // 对话框组件

2、externals 属性

webpack的externals属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。具体实现如下：

在 build/webpack.base.conf.js文件中：

javascript 复制代码

module.exports = {
	externals: {
		Vue: 'Vue',
		Axios: 'axios'
	}
}
// 其中的 key--对应 import Axios名称，value--对应原始方法名称

需要在根目录，index.html 中引入一下

html 复制代码

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>

3、给定文件匹配范围

include 规定需要处理的文件有哪些

enclude 排除不需要处理的文件夹

javascript 复制代码

{	test: /\.js$/,
	loader: 'babel-loader',
	include: [resolve('src')],
	exclude: /node_modules/
}

4、noParse 属性

过滤掉不需要解析的文件

javascript 复制代码

{	module: {
		noParse: /jquery/,
		rule: [
			...
		]
	}
}

5、cacheDirectory 缓存属性

babel-loader提供了cacheDirectory选项参数，默认为false。

设置空或true时，会利用系统的临时文件夹缓存经过 babel 处理好的模块，对于 rebuild js 有着非常大的性能提升。

javascript 复制代码

{	test: /\.js$/,
	loader: 'babel-loader?cacheDirectory',
	include: [resolve('src')],
	exclude: /node_modules/
}

6、happyPack 多个子进程并行

webpack 在打包过程中，loader 转化js、css、img等文件是同步进行的，一个一个的转换。

happyPack 的原理是，将这些任务分解到多个子进程中，并行执行，执行完成后把结果发送到主进程，从而减少整体的打包时间。