# webpack-demo

**Repository Path**: Sunshine_OS/webpack-demo

## Basic Information

- **Project Name**: webpack-demo
- **Description**: webpack-入门学习示例....
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-09
- **Last Updated**: 2021-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webpack 系统学习DEMO
-----

因国内已有很健全的webpack中文官网及社区，所以基本的学习资料请移步中文官网进行学习。  
webpack 中文官网：https://webpack.docschina.org/guides/

## 是什么？
本质上，是一款用于Javascirpt现代化开发的构建/静态模块打包工具(不仅仅局限在Web端)

有哪些构建工具：
* Npm Script（任务型）
* Grunt（任务型）
* Gulp（流式构建）
* Fis3(集成型、百度出品)
* WebPack(基于模块构建)
* Rollup（基于模块构建）

## 能做什么事儿？
主要就是提升工作效率，将各种提高开发效率的新思想和框架的实现/源代码转换成可执行的JavaScript、CSS、HTML代码

具体包括：
* 代码转换：将TypeScript编译成JavaScript、将SCSS编译成CSS等。
* 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
* 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。
* 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
* 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。（开发层面）
* 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
* 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

## 怎么用？
### 基本安装
因实际使用过程中很少使用到全局安装的使用情况，所以这里的命令是非全局安装
```
npm install webpack webpack-cli --save-dev
```
### CLI 命令行方式
直接在终端执行：
```
npx webpack
```
加入到package.json脚本中，使用 npm 执行脚本命令：
```
{
  "scripts": {
    "build": "webpack "
  }
}
```
### Node 模块方式
例如Vue脚手架和React脚手架就是采用这种方式，使用node.js代码来调用webpack来进行编译打包！
``` javascirpt 
const webpack = require('webpack');
const compiler = webpack({
  // [配置对象](/configuration/)
});
compiler.run((err, stats) => { // [Stats Object](#stats-object)
  // ...
  compiler.close((closeErr) => {
    // ...
  });
});
```
## 有那些核心概念？
在正式进行进入学习你需要先理解一些**核心概念**
* 入口（entry）
* 输出（output）
* loader
* 插件（plugin）
* 模式（mode）
* 浏览器兼容性(browser compatibility)
* 环境(environment)

## 配置项
不在继续往下介绍了，这部分必须得跟着官网来进行学习


## 示例工程说明
* example\chapter01 : 起步
    * 01 传统模式
    * 02-bundle 通过webpack打包块并使用构建的入口/bundle
    * 03-config 利用配置文件进行打包
* example\chapter02 : 管理资源
    * 01-assets 管理/使用资源(css、字体、图片、json数据、xml数据、cvs数据等等)
* example\chapter03 : 管理输出
    * 01-multi-bundle 多个入口(Bundle)输入（可应用多页应用）
    * 02-html-plugin 基于插件管理HTML 
* example\chapter04 : 开发环境
    * 01-source-map 使用source map 解决DEBUG困得的问题
    * 02-dev-watch 使用watch模式自动编译代码
    * 03-dev-server 使用dev-server内置服务器解决watch自动编译都需手动更新浏览器的问题（主要手段）
    * 04-dev-middleware 使用中间件和配置独立服务器自动编译访问
* example\chapter05 : 代码分离
    * 01-split-entry 拆分多个入口块（第三方包多次引用）
    * 02-prevent-duplication  entry方式解决拆分多个入口块后的重复引用问题(代码分离)
    * 03-split-plugin 使用插件来抽取重复依赖的第三方包(代码分离)
    * 04-dynamic-import 采用动态引入第三方解决重复引用问题（代码分离）
* example\chapter06 : 缓存
    * 01-catch 基于代码分离的前提，进行浏览器定向缓存
* example\chapter07 : 创建Library
    * 01-lib 构建 script 方式使用的普通Library
    * 02-lib-multi 构建支持模块化使用的Libray
    * 03-lib-3rd 构建剔除第三方包后的library