深入浅出Webpack

http://webpack.wuhaolin.cn/

模块化规范

1. CommonJS
   require 同步加载依赖
   module.exports

   Node.js
   需通过工具转为ES5

   • 1:export.XX=XX
   • 2:module.export=XX

2. AMD

   Asynchronous_module_definition
   异步加载模块

3. ES6模块化

   import XX ,{XX} from “”;

   export default {};

   export ()=>{}

4. 样式文件

   @import “XX”

框架

简化DOM操作

1. React
   render

2. Vue

   <template>
   </template>
   
   
   <script>
     export default{
       data(){
         return {
           
         }
       }
     }
   </script>
   
   
   <style>
   </style>
   

3. Angular2

New

1. ES6
   bable
2. ts
3. Flow
4. Scss

构建工具

将源码转化为可执行的 js,html,css

压缩

代码分割，首屏不需要的异步加载

模块合并

发布

npm script

shell脚本

Grunt

Gulp

基于strom流的自动化构建工具

管理，执行文件，监听，读写文件

.task 注册一个任务

.run 执行任务

.watch 监听文件变化

.src 读文件

.dest 写文件

rollup

进入webpack的世界

安装

通过webpack可执行文件启动构建任务

新建web项目

1. npm init
2. Yeoman 快速生成

安装Webpack

npm i -D webpack

@beta 体验版