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