万字长文解密webpack-基本使用 高级用法 性能优化 你想要的全都有！！！_36kr登录 webpack解密

"build": "webpack --config build/webpack.prod.js"

},

#### 1.1.5 测试


新建src/index  
 执行 yarn build


### 1.2 启动本地服务


#### 1.2.1 安装webpack-dev-server


`yarn add -D webpack-dev-server`


#### 1.2.2 配置devServer


webpack.dev.js

devServer: {
port: 8080,
progress: true, // 显示打包的进度条
contentBase:path.join(__dirname, ‘…’, ‘dist’), // 根目录
open: true, // 自动打开浏览器
compress: true, // 启动 gzip 压缩

    // 设置代理
    proxy: {
        
    }
}

#### 


#### 1.2.3 启动


`yarn dev`


#### 1.2.4 测试


##### 安装HtmlWebpackPlugin，自动生成html


`yarn add -D html-webpack-plugin`


##### 配置HtmlWebpackPlugin


webpack.common.js

plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, ‘…’, ‘src/index.html’),
filename: ‘index.html’
})
]

> 
> 开发环境，会在内存中生成一个html文件  
>  打包环境，会在dist下生成一个html文件  
>  html文件会自动引入main.js
> 
> 
> 


### 1.3 处理es6(配置babel)


#### 13.1. 安装


##### babel-loader


`yarn add -D babel-loader`


##### @babel/core


`yarn add -D @babel/core`


##### @babel/preset-env


`yarn add -D @babel/preset-env`


#### 1.3.2. 配置


##### .babelrc

{
“presets”: [“@babel/preset-env”],
“plugins”: []
}

##### build\webpack.common.js

module: {
rules: [
{
test: /.js$/,
// loader: ‘babel-loader’, //loader 是单个加载器，use是加载器数组
use: [
‘babel-loader’,
],
include: path.join(__dirname, ‘…’, ‘src’),
exclude: /node_modules/
}
]
},

### 1.4 处理css


#### 1.4.1 安装


##### style-loader



> 
> css插入到页面的style标签
> 
> 
> 


`yarn add -D style-loader`


##### css-loader


`yarn add -D css-loader`


##### postcss-loader + autoprefixer



> 
> 自动添加前缀
> 
> 
> 


`yarn add -D postcss-loader autoprefixer`


#### 1.4.2 配置


build\webpack.common.js

{
test: /.css$/,
// loader 的执行顺序是：从后往前
use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’]
},

postcss.config.js

module.exports = {
plugins: [require(‘autoprefixer’)]
}

### 1.5 处理图片


#### 1.5.1 一般文件中引入图片有三种方式：


js文件中通过 import imgSrc from ‘./photo’； img.src = imgSrc引入  
 在css文件中作为背景图引入  
 在html文件中直接引入


#### 1.5.2 安装


##### file-loader


`yarn add -D file-loader`


##### url-loader


`yarn add -D url-loader`


#### 1.5.3 配置


build-base-conf\webpack.dev.js

// 直接引入图片 url
{
test: /.(png|jpg|jpeg|gif)$/,
use: ‘file-loader’
}

build-base-conf\webpack.prod.js

// 图片 - 考虑 base64 编码的情况
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: ‘url-loader’,
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则，依然延用 file-loader 的形式，产出 url 格式
limit: 5 * 1024,

        // 打包到 img 目录下
        outputPath: '/img1/',

          // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
          // publicPath: 'http://cdn.abc.com'
    }
    }
},

## 2 高级特性


### 2.1 配置多入口


#### 2.1.1 配置entry

entry: {
index: path.join(srcPath, ‘index.js’),
other: path.join(srcPath, ‘other.js’)
},

> 
> 这里的index与other就是chunk名称
> 
> 
> 


#### 2.1.2. 配置对应的出口


build-base-conf\webpack.prod.js

output: {
filename: ‘bundle.[contentHash:8].js’, // 打包代码时，加上 hash 戳
path: distPath,
// publicPath: ‘http://cdn.abc.com’ // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
},

> 
> 注意这里只需要在prod里面加入配置，  
>  dev不需要
> 
> 
> 


#### 2.1.3 配置对应的模板

new HtmlWebpackPlugin({
template: path.join(__dirname, ‘…’, ‘src/index.html’),
filename: ‘index.html’,
// chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
chunks: [‘index’] // 只引用 index.js
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(__dirname, ‘…’, ‘src/other.html’),
filename: ‘other.html’,
chunks: [‘other’] // 只引用 other.js
})

### 2.2 抽离css(打包)


#### 2.2.1 安装


##### mini-css-extract-plugin


`yarn add -D mini-css-extract-plugin`


#### 2.2.2 配置


build\webpack.prod.js


##### loader

// 抽离 css
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader, // 注意，这里不再用 style-loader
‘css-loader’,
‘postcss-loader’
]
},

##### plugins

new MiniCssExtractPlugin({
filename: ‘css/main.[contenthash:8].css’
})

### 2.3 压缩css（打包）


#### 2.3.1 安装


#### optimize-css-assets-webpack-plugin


`yarn add optimize-css-assets-webpack-plugin`


#### 2.3.2 配置


build-min-extract-css\webpack.prod.js

optimization: {
// 压缩 css
minimizer: [ new OptimizeCSSAssetsPlugin({})],
}

### 2.4 抽离公共代码


抽离公共代码  
 我们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块多次被下载会造成资源浪费，如果把这些公共模块抽离出来只需下载一次之后便缓存起来了，这样就可以避免因重复下载而浪费资源，那么怎么在webpack中抽离出公共部分呢？方法如下：


#### 2.4.1 公共模块抽离


举例：


项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件，  
 page1.js 和 page2.js中同时都引用了a.js, b.js，  
 这时候想把a.js, b.js抽离出来合并成一个公共的js，然后在page1, page2中自动引入这个公共的js，

splitChunks: {
cacheGroups: {
//公用模块抽离
common: {
chunks: ‘initial’,
minSize: 0, //大于0个字节
minChunks: 2 //抽离公共代码时，这个代码块最小被引用的次数
}
}
}

#### 2.4.2 第三方模块抽离


页面中有时会引入第三方模块，比如import $ from ‘jquery’; page1中需要引用，page2中也需要引用，这时候就可以用vendor把jquery抽离出来，方法如下：

optimization: {
// 分割代码块
splitChunks: {
chunks: ‘all’,
/**
* initial 入口 chunk，对于异步导入的文件不处理
async 异步 chunk，只对异步导入的文件处理
all 全部 chunk
*/

        // 缓存分组
        cacheGroups: {
            // 第三方模块
            vendor: {
                name: 'vendor', // chunk 名称
                priority: 1, // 权限更高，优先抽离，重要！！！
                test: /node\_modules/,
                minSize: 0,  // 大小限制
                minChunks: 1  // 最少复用过几次
            },

            // 公共的模块
            common: {
                name: 'common', // chunk 名称
                priority: 0, // 优先级
                minSize: 0,  // 公共模块的大小限制
                minChunks: 2  // 公共模块最少复用过几次
            }
        }
    }

}

注意：这里需要配置权重 priority，因为抽离的时候会执行第一个common配置，入口处看到jquery也被公用了就一起抽离了，不会再执行wendor的配置了，所以加了权重之后会先抽离第三方模块，然后再抽离公共common的，这样就实现了第三方和公用的都被抽离了。


## 3 性能优化


### 3.1 优化babal-loader(缩小构建目标)


#### 3.1.1 原因


Loader处理文件的转换操作是很耗时的，所以需要让尽可能少的文件被Loader处理


#### 3.1.2 配置

{
test: /.js$/,
use: [
‘babel-loader?cacheDirectory’,//开启转换结果缓存
],
include: path.resolve(__dirname, ‘src’),//只对src目录中文件采用babel-loader
exclude: path.resolve(__dirname,’ ./node_modules’),//排除node_modules目录下的文件
},

### 3.2 happyPack 多进程打包


#### 3.2.1 安装


`yarn add -D happypack`


#### 3.2.2 配置


Plugins

new HappyPack({
// 用唯一ID来代表当前HappyPack是用来处理一类特定文件的，与rules中的use对应
id: “babel”,
loaders: [“babel-loader?cacheDirectory”], //默认设置loader处理
threads: 5, //使用共享池处理
}),
new HappyPack({
id: ‘styles’,
loaders: [‘css-loader’, ‘postcss-loader’],
threads: 5, //代表开启几个子进程去处理这一类型的文件
verbose: true //是否允许输出日子
}),

rules

 {
            test: /\.(js|jsx)$/,
            use: [MiniCssExtractPlugin.loader, "HappyPack/loader?id=babel"],
            exclude: path.resolve(__dirname, " ./node\_modules"),
        },
        {
            test: /\.css$/,
            use: 'happypack/loader?id=styles',
            include: path.join(__dirname, '..', 'src')

        },

### 3.3 ParallelUglifyPlugin优化压缩


webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。  
 所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。


#### 3.3.1 安装


`yarn add -D webpack-parallel-uglify-plugin`


#### 3.3.2 配置

new ParallelUglifyPlugin({
// 传递给 UglifyJS的参数如下：
uglifyJS: {
output: {
/*
是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
可以设置为false
*/
beautify: false,

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

yarn add -D webpack-parallel-uglify-plugin

3.3.2 配置

 new ParallelUglifyPlugin({
      // 传递给 UglifyJS的参数如下：
      uglifyJS: {
        output: {
          /\*
 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
 可以设置为false
 \*/
          beautify: false,


[外链图片转存中...(img-LQ6cLxoE-1714743382133)]
[外链图片转存中...(img-y8L2ksO8-1714743382134)]
[外链图片转存中...(img-Vdivu0vn-1714743382134)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**