chrissong1994/webpack-step

webpack 主要功能学习练习

webpack-step

webpack 主要功能学习，一步步实现webpack 的项目构建。

• step_01_webpack基础环境配置

1. 实现webpack实现项目构建的基本功能，输入输出；
2. 加入html-webpack-plugin 自动实现模版的js 引入；
3. babel-loader 实现es6 语法转 es5 语法；
4. 利用 webpack-dev-server 实现热加载和开启服务功能；
5. devtool='inline-source-map' 实现开发状态下的调试；
6. yargs-parser 模块解析命令行参数；
7. 利用 cross-env（运行跨平台设置和使用环境变量的脚本），保证windows 和 linux 的 环境变量设置统一；

• step_02_webpack配置丰富

1. 增加对于sass,less 的解析功能；
2. 增加对于图片，文件的加载解析；
3. 增加eslint 实现语法检查；
4. 代码分离,分离第三方模块代码；
5. js和css 分离开来； mini-css-extract-plugin
6. 加入依赖可视化查看工具 webpack-bundle-analyzer；
7. shim 预置依赖；

-