# study-webpack

**Repository Path**: changye/study-webpack

## Basic Information

- **Project Name**: study-webpack
- **Description**: http://webpack.wuhaolin.cn
study webpack
这一次，要学会并灵活运用webpack
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-04-26
- **Last Updated**: 2022-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# study-webpack

#### 项目介绍
http://webpack.wuhaolin.cn
study webpack
这一次，要学会并灵活运用webpack

#### 环境搭建
* npm i -g webpack
* npm i -g webpack-cli

####知识点
> JS模块化规范

    * commonJs => require
    * AMD => define/require
    * es6模块化 => import {},export

> 构建项目的注意点

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

> 项目构建工具[按出现的时间顺序]

    * npm script
    * grunt
    * gulp
    * fis3
    * webpack
    * rollup

#### webpack
* 要支持非 JavaScript 类型的文件，需要使用 Webpack 的 Loader 机制

#### webpack-entry
* 寻找相对路径时，会以context为根目录。context 默认为执行启动 Webpack 时所在的当前工作目录

#### webpack-output

#### webpack-loader
loader：具有文件转换功能的翻译员

    在遇到哪些文件时使用哪些loader去加载和转换

    ```javascript
    /*querystring*/
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader?minimize'],
            }
        ]
    }
    /*遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里*/
    /*在网页执行JS时通过dom操作动态往html head中插入style标签*/
    /*这样会导致js文件变大导致加载网页时间变长*/
    /*Object方式*/
    use: [
        'style-loader', 
        {
            loader:'css-loader',
            options:{
            minimize:true,
            }
        }
    ]
    /*在源码中指定用什么loader去处理文件*/
    require('style-loader!css-loader?minimize!./main.css');
    ```

    > 配置loader注意事项

        * 使用
        * use是数组，执行顺序由后到前
        * 每一个loader可以通过url querystring方式传入参数。?minimize表示要进行压缩

#### webpack-plugin
    作用：扩展webpack功能，通过在构建流程里注入钩子实现

#### webpack-dev-server
> 使用webpack的必要性
    * 提供 HTTP 服务而不是使用本地文件预览；
    * 监听文件的变化并自动刷新网页，做到实时预览；
    * 支持 Source Map，以方便调试。
> 特点
    * 重新刷新整个页面，实时预览
    * 模块热替换刷新技术=>局部替换      --hot
    * 支持source map，可以用于浏览器调试        --devtool source-map
#### 构建过程
> css文件

    webpack不原生支持解析css文件。

#### es6 => es5
> babel
    * plugins: 插件
    * preset: 语法特性, 相当于plugins合集

#### webpack-typescript
    ts:js的超集。要配合tsconfig.json食用

#### webpack-flow
    flow通常配合ES6使用，所以需要用到babel

#### webpack-PostCSS
    PostCSS 是一个 CSS 处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。

#### webpack-react + typescript
    需要将tsx文件根据tsconfig转换为js文件，所以webpack中需要用刀resolve

#### webpack-ng2
    @angular/core @angular/common//基础核心模块
    @angular/platform-browser //框架浏览器环境运行库，类似于 react-dom
    core-js rxjs zone.js //Angular2 正常跑起来所依赖的运行环境和 polyfill
    @angular/platform-browser-dynamic @angular/compiler //在浏览器里运行过程中动态的编译 HTML 模版