基础篇

[webpack与构建发展历史](写文章 - 《玩转Webpack》学习笔记 Day1 - 掘金 (juejin.cn))

[webpack基础用法]

webpack进阶用法

进阶篇

编写可维护的webpack构建配置

webpack构建速度和体积优化策略

原理篇

通过源码掌握webpack打包原理

编写Loader和插件

实战篇

React全家桶和 webpack开发商城项目

--------------------------------------正文-------------------------------

webpack与构建发展历史

一、为什么需要构建工具

转换ES6语法 ----------为了转换成ES5来兼容低版本浏览器

ES6 支持情况：ECMAScript 6 compatibility table (kangax.github.io)

转换JSX
CSS前缀补全/预处理器（less 、sass） --------代码css更加整齐，可读性更强
压缩混淆
图片压缩

二、前端构建演变历程

前端构建演变之路

ant + YUI Tool：

YUI Tool 和 Java 里ant结合起来使用，对代码中css和js进行压缩

grunt： 本质是task runner，会将整个构建过程分为一个个任务，每个任务做一件事情（比如将整个打包过程分为解析js、解析html，解析css、图片压缩、代码css、js压缩、文件指纹），任务做完将结果存放在本地磁盘temp目录下，导致打包速度比较慢，因为有本地IO操作

gulp： 也和grunt是模块化的，但gulp有文件流概念，不会存放在本地磁盘目录中，会存放在内存中去，下一个步骤可以使用上一个步骤内存，大大加速了打包速度

fis3： 百度fis3对资源颗粒度控制比较精细，但fis3团队现在不再维护了，使用团队减少

rollup： parcel： webpack：

三、为什么选择webpack

	webpack	grunt	gulp
定义	Module bundler	Task Runner	Task Runner
语言	JavaScript	Node.js	Node.js
发布时间	2012.3	2012.6	2013.7
GitHub Stars	40766	11796	29427
周下载量	2,385,392	478,876	816,228

GitHub stars和周下载量很高
社区生态丰富
配置灵活和插件化扩展开发者可以根据自己需要扩展插件
官方更新迭代速度快 loader和 plugins都很多，维护高

四、初识webpack

webpack配置文件

1.webpack默认配置文件：webpack.config.js 2.可以通过 webpack --config 指定配置文件可以区分生产和开发环境，也可指定服务端渲染环境

webpack配置组成

module.exports= {
    entry: '.src/index.js', //1.打包入口文件
    output:'./dis/main.js', //2.打包的输出
    mode:'production',      //3.环境 
    module:{
        rules: [            //4. Loader 配置
            { test: /\.txt$/, use: 'raw-loader'}
        ]
    },
    plugins:[               //5. 插件配置
        new HtmlwebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

零配置Webpack：

module.exports= {
    entry: '.src/index.js', //1.指定默认的entry为： .src/index.js
    output:'./dis/main.js', //2.指定默认output：./dis/main.js
    mode:'production',      //3. 
    module:{
        rules: [            //4. 
            { test: /\.txt$/, use: 'raw-loader'}
        ]
    },
    plugins:[               //5. 插件配置
        new HtmlwebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

《玩转Webpack》[学习笔记Day2](写文章 - 《玩转Webpack》学习笔记 Day2 - 掘金 (juejin.cn))

参考

极客时间程柳峰老师《玩转webpack》

《玩转Webpack》学习笔记 Day1

基础篇