# learn webpack 

**Repository Path**: yp_program/learn-webpack

## Basic Information

- **Project Name**: learn webpack 
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-31
- **Last Updated**: 2024-04-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1

## DLLPlugin

webpack4以上就没什么收益
动态链接库: 将第三方库单独打包,避免每次构建重新编译这些依赖

### 操作

1. 创建单独的用于生成dll的`webconfig`配置文件,如:`webpack.config.dll.js`,内容主要有
    1. entry: `{名称}:{[包含的依赖]}`
    2. output: 用于存放dll文件的路径
    3. plugins: 配置Dll元数据文件名`new webpack.DllPlugin({path:path.join(__dirname, '[name]-manifest.json'),name:'[name]'})`
2. 执行`webpack.config.dll.js`生成dll文件
3. 在`webpack.config.js`中配置`DllReferencePlugin`,将生成的dll文件注入到主应用中

## cnpm

报错:无法加载文件 `C:\Users\admin\AppData\Roaming\npm\cnpm.ps1`，因为在此系统上禁止运行脚本。

需要管理员权限运行powershell，输入`set-ExecutionPolicy RemoteSigned` 放开权限
`set-ExecutionPolicy Default`还原

## watch模式

`webpack --watch`模式能自动监听文件变化,自动编译,但会阻塞当前进程,无法执行其他操作
被webpack-dev-server继承了

## HMR 热替换

Q1: 样式文件能自动替换,js不能,自会动刷新页面
A1: 样式文件已被自动处理,js文件需要手动处理

Q2: 框架为什么不需要手动处理
A2: 框架脚手架已经自动处理了

```js
// module.hot.accept 热替换模监听的文件,当文件发生编变化时,会自动触发回调
// 回调函数中已经可以访问更新后的模块
// 添加此方法后,该文件的变化将不再触发刷新页面
// 保持变化前的状态需要根据业务逻辑做不同的处理
module.hot.accpet('./MyPlugin.js',()=>{

});

```

package.json:
`"sideEffects": false` 标记包没有模块副作用

### 代码分割

1. 多entry,提取注意公共代码
2. 动态导入.import回调后使用模块.魔法注释,单独给一个chunk命名,同名chunk合并