webpack构建工具基础知识

webpack是项目打包构建工具，基于项目做打包优化。

通过一个入口js文件，来一步一步进行打包构建:

另外的两个项目构建工具Gulp和Grunt，Gulp是通过编程的方式进行优化。Grunt是通过配置js文件进行优化。

案例：webpack.config.js配置文件中，入口文件app.js最后会输出bundle.js。 图如下：

常见插件

• html-webpack-plugin => html模板插件
• extract-text-webpack-plugin => 抽取文本文件，比如将.css文件中的样式放到style中
• UglifyJsPlugin/new webpack.optimize.UglifyJsPlugin() => 对Js文件进行压缩合并
• CommonsChunkPlugin/ new webpack.optimize.CommonChunkPlugin() => 抽取公共模块，比如在多页面应用中
• clean-webpack-plugin => 打包前将文件清楚干净

• copy-webpack-plugin => 用来复制文件的插件

  常见loader
  webpack在构建时会将所有文件当作js来解析，（只解析JS文件）。当构建过程中遇到不是js的文件会借助loader加载器来加载解析。比如sass文件不识别，会通过sass-loader文件来解析。

• 解析css文件 css-loader

• 解析sass、less、scss、stylus文件 => sass-loader/less-loader/scss-loader/stylus-loader
• 解析图片（png、jpg、svg、gif） => file-loader/url-loader
• 给css添加前缀（不同浏览器不同内核） => postcss-loader/autoprefixer