webpack基础使用

随着前端模块化开发方式的流行，我们在开发前端的时候，需要有一个工具来进行对代码的处理和加工。方便我们的开发，优化开发流程。webpack就是其中最优秀的处理工具之一。

webpack是什么

webpack本质上是一个模块打包工具。将咱们写的每一个模块打包成一个或者多个bundle。当然在打包的过程中可以进行我们需要的处理。

为什么选用webpack

1. 模块化规范可以选用es6 module。
2. 可以对不同的资源进行处理。
3. 可以设置开发环境和生产环境。
4. 有独立的配置文件。
5. 可以将代码分割成不同的chunk,实现按需加载。
6. 支持sourcemap。
7. 异步IO加上多级缓存，在增量编译上速度更快。

安装和使用

1. 直接作为依赖包用npm安装npm i -D webpack
2. 写一份配置文件，这个配置文件可以写一个，然后存起来当模板使用。
3. 在npm脚本中执行webpack

常用命令

1. webpack 最基本的启动命令。
2. webpack -d 提供sourcemaps,方便调试。文件比较大，在开发环境下使用。
3. webpack --colors 输出结果带彩色。
4. webpack --profile 输出性能数据，可以看到每一步的耗时。可以定位到打包时间比较长的原因。

配置文件

入口

1. 入口可以是一个字符串，一个数组或者一个对象。一般情况下，单页面时都是单一入口，即一个字符串就可以。

输出

1. 可以定义输出的文件名和路径。一般来说有三个参数设置。
2. path是打包输出的绝对路径。
3. filename是打包输出之后的bundle文件名。
4. publicPath是访问路径。

loader

处理css的

1. style-loader 把css通过style标签出入到html中。
2. css-loader 处理css中的引入文件。
3. url-loader 处理图片，可以将图片处理为base64格式的。

plugin

1. new webpack.optimize.CommonsChunkPlugin(options)可以将公共的组件提取出来进行缓存避免重复下载。
2. extract-text-webpack-plugin将css提取到单独的文件中。

demo地址