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地址