前端工程化 | Webpack

• webpack是一个模块打包工具，他依赖于nodejs环境。

• 与其他打包工具（grunt/gulp 前端流程的自动化）对比，webpack更强调模块化（AMD,CMD,CommonJ,ES6）开发管理。

• 功能：自动处理js之间相关的依赖、ES6 转ES5 scss、less转成css .vue文件转成js文件

• 打包后的文件放在dist文件夹下，将所有依赖打包成一个bundle.js

• package.json 版本信息 中的script定义执行脚本 script:{"build"} (npm run build)

  webpack.config.js 中配置 ：

  1、配置入口entry 出口output(path、filename)

  2、配置loader ：告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。（转换某些类型的模块，它是一个转换器。）

  常用的loader ：style-loader / css-loader / less-loader / url-loader和file-loader(图片文件处理)

  3、配置plugin ：对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

  常用的plugin：HtmlWebpackPlugin插件（打包html，将index.html文件打包到dist文件夹中）、uglifyjs-webpack-plugin插件（JS压缩插件）

  4、配置Babel：ES6 ----> ES5