# webpack-test
**Repository Path**: Spike_Tang/webpack-test
## Basic Information
- **Project Name**: webpack-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-21
- **Last Updated**: 2021-06-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## webpack是什么
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
1. 基于node.js环境的工具，可以自由使用node.js的API。
```
现在前端项目中都有的
├─ node_modules
└─ package.json
```
```javascript
// webpack.config.js
// 导入node.js path模块
const path = require('path');
module.exports = {
entry: {
index: './src/app.js'
},
output: {
// 使用node.js path模块的方法
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
};
```
```javascript
// webpack node启动的方式
const path = require('path');
const webpack = require('webpack')
webpack({
entry: {
index: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
}, (err, stats) => {
// [Stats Object](#stats-object)
if (err || stats.hasErrors()) {
// [在这里处理错误](#error-handling)
}
// 处理完成
console.log(stats.toString({
chunks: false, // 使构建过程更静默无输出
colors: true // 在控制台展示颜色
}))
})
// webpack.config.js本质是通过node环境运行，返回一个配置对象。然后将这个对象给webpack去运行。
```
2. 解决前端模块化，合并多文件减少http请求次数。
```javascript
// 早期项目目录
├── style.css
├── module-a.js
├── module-b.js
└── index.html
// module-a.js
function foo () {
console.log('moduleA#foo')
}
// module-b.js
var data = 'something'
// html 文件
Stage 1
```
```javascript
// 打包前
├── app.js
├── module-a.js
└── module-b.js
// app.js
import './module-a';
import './module-b';
console.log(123)
// 打包后
├── index.bundle.js
└── index.html
// 输出符合规范的模块
// 解决模块依赖顺序问题
// 多模块文件合并
```
3. 提供本地servers
```javascript
// 早期web页面基本都是后端渲染
// 前端切图完成之后的 html 提供给后端，改造成jsp ejs 等模板。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basepath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
Insert title here
// 后来前后端分离，后端通过接口提供给前端后，前端自行渲染。
// 但是这个接口一般会受到跨域影响，所以需要本地启动一个servers来解决这个问题。
```
4. 提供其他功能和定制化的文件处理，如：代码热更新，代码压缩，混淆，图片合并。
```javascript
// 随着前端功能的丰富，代码量增多。每次请求文件增加，为了减少网络传输量和减少首屏渲染时间，就产生了代码压缩的需求。
// 同时前端中暴露的接口，前端拦截逻辑增加。为了增加前端安全性产生了代码混淆的需求。
// 以及之后便于增加开发效率的，热更新、发布时删除注释测试代码或者console、css自动补齐兼容性前缀、图片合并等，只要node能实现支持的都可以添加。
```
为什么选择 webpack
## 学习难点
1. 现在基于vue react angular框架都有自己二次封装的脚手架工具，需要调整的配置较少，使用场景很少。
2. webpack 以及相关loader、plugin、node.js，更新版本和日常使用的版本有差距。因为webpack配置固定之后很长时间不会更新，缺乏长时间的关注。
3. 日常踩坑可能涉及，plugin文档不清楚、node.js版本或者一些环境问题、webpack一些配置细节不清楚那里查。踩坑问题百度不到符合自己的答案。
## 推荐学习目标
尝试搭建一个自用的开发环境。
1. 根据自身需求融合多技术栈。例如 你平常项目使用的是typescript 的环境，现在突然需要你测试javascript的代码。你产出的NPM包，测试在commonjs amd cmd es6不同规范下的兼容。
2. 便于日常学习测试使用。例如平常你在学习或者开发中，需要测试一个API，一个模块想法，一个新的路由结构，这个时候就需要一个环境。在公司项目测可能会忘记删除，或者是项目较大项目启动和热更时间长。
3. 日常使用产生想法需求，实现后适应的用途增加产生新的需求。有助于webpack持续学习，和提供更多日常开发的便利功能。
## 基础概念
例子：example1 example2
1. #### 入口（entry）
是配置项目开始时的入口文件，webpack通过这个文件找到与他关联的其他模块。
2. #### 输出（output）
是配置文件打包后输出的位置，以及生成文件部分数据配置。例如：文件名称，文件使用的外链接host。
3. #### loader
给webpack拓展解析文件类型的组件。针对不同类型文件添加不同类型的loader。webpack默认是支持js和json的。
4. #### 插件（plugin）
给webpack拓展功能的组件。例如：自动生成html文件，代码压缩，代码分块，eslint检查。
5. #### 模式（mode）
不同模式设置的部分默认参数不同
## 常用功能配置
1. ### 开发环境
1. 本地服务，并且可以外部访问。
2. 模块热替换
例如：example 4
2. ### 代码分离
例如：example 5
3. ### 管理外部依赖
1. 项目中使用到第三方框架库，其实不用打包到业务代码中，第三方代码相对于业务代码基本是不会变化的，所以单独加载然后再利用浏览器缓存会较好。
## 核心目的
需要自己制定方案，配合方案改造代码结构，再利用node.js和webpack来实现
1. 制定适合多项目的代码打包分离方案配合浏览器缓存，实现以浏览器缓存维度的代码文件模块化。减少用户首屏时间。
1. 最大限度利用浏览器文件缓存机制，减少http加载文件。如果项目中所有代码都打包到一个js文件中，就意味着每次迭代版本之后的第一次浏览都会较慢，哪怕你之改动了一行代码也是文件的变化。
2. 文件缓存目标不要仅限于单一项目，是同一产品线的所有项目。
2. 提供完善功能，保证每个项目工程结构代码结构一致。减少重复劳动和非逻辑劳动。
1. 例如场景的H5活动项目，就是多个项目使用一个开发环境。
## 待详细补充的
1. webpack eslint配置使用
2. webpack babel配置使用