# webpack02

**Repository Path**: gamejan/webpack02

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 初始化
npm init -y
npm install webpack webpack-cli -D
配置入口和出口
npm install webpack-dev-server -D

## 自动载入js文件
npm install html-webpack-plugin -D
使用hash解决缓存问题

## 清除dist目录
npm install clean-webpack-plugin -D

## css读取loader
npm install style-loader css-loader less less-loader -D
加载图片loader 解析图片打包成文件或者base64插入代码中
npm install file-loader url-loader -D

通过option进行配置处理

## 处理高版本js
@babel/core babel的核心模块
babel-loader 解析js代码的加载器，webpack和babel的桥梁
@babel/preset-env es6转化成es5插件的集合

npm install @babel/plugin-transform-runtime @babel/runtime -D
@babel/plugin-transform-runtime依赖于@babel/runtime，运行时自动寻找到runtime

## 关于跨域问题
当协议域名端口号不相同时会产生跨域
造数据方法:before

## 暴露全局变量
* 直接使用cdn的方式 https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
* providePlugin
* 暴露在全局下 expose-loader

import $ from 'jquery'这样引入的时候是从node_modules中去找

webpack.ProvidePlugin  =>webpack自带的插件

## sourceMap(代码排查)，用于调试错误
devtool
生产环境：cheap-module-source-map
开发环境：cheap-module-eval-source-map

## Tree-shaking&scopeHosting
适用于生产环境
tree-shaking -- 唯一一个在package.json中进行配置的项目  "sideEffects":false,
这种方式可能会让引入没有使用的都被去除
排除掉需要的引入   "sideEffects":["**/*.css"]

## 热更新
减少请求，提高加载速度，进行数据更新
new webpack.HotModuleReplacementPlugin() webpack自带的热更新

## 懒加载（动态加载模块）
在vue中所有的路由都进行了预引入

## 打包文件分析工具（生产环境下使用）
- webpack-bundle-analyzer

## splitChunks
分离第三方模块和库

## resolve解析
- extensions 添加扩展名进行匹配 引入时可以不用写.js也能正常导入 默认寻找js和json文件
- alias 设置别名

## happyPack 多线程打包
- 多线程打包，把不同的逻辑交给不同的线程处理

## 根据mode分离配置环境