webpack介绍

2016-08-12

webpack是什么？

weba是一个module.bundler(模块打包工具)其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。Webpack对它们进行统 一的管理以及打包发布

官网地址

官网：http://webpack.github.io/docs/ 
Webpack-handlebook: http://zhaoda.net/webpack-handbook/
Gitbook: http://fakefish.github.io/react-webpack-cookbook/index.html

为什么使用webpack?

1 对CommonJs，AMD ,ES6 的语法做了兼容
2 对js css图片等资源文件都支持打包
3  串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4 有独立的配置文件webpack.config.js
5 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
6 支持 SourceUrls 和 SourceMaps，易于调试
7 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
8 .webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

webpack事物使用

1 安装webpack与运行介绍
Deploy是编译之后的可用于文件打包的文件，src中的是开发文件
2 引入wenpack依赖
 在项目根目录打开命令窗口引入项目依赖，全局安装
 npm  install  webpack  -g // 全局安装webpack
3 创建配置文件
 （1）webpack.base.config.js  公用的配置方在这里面（可通过插件继承）
  （2） webpack.develop.config.js 开发环境中用到的配置文件
  （3）webpack.publish.config.js 生产环境中用到的配置文件

module.exports={// 必须有的结构

    //所有配置都在{}内部
    //指定入口
    entry:{
        //这里可以有多个入口
        main:'./main.js',
    },
    optput:{
        //出口
        filename:'./build.js'
    },      
    对于es6的一些代码，最好我们需要转换
    module:{
        包含多个模块，这些模块为对应的代码提供了转化功能
        loaders:[
            {tes:/.js/,  告诉webpack什么文件走loader:test要写正则表达式
            loader:'babel-loader',
            告诉loader添加额外的配置
            option:{
                出来这个配置带s的不是数组之外，其他都是数组
                presets:['es2015'],//设置Es6关键字的解析 在下载的时候babel-plugin-transform-runtime-;
                plugins:['transform-runtime']//解析ES6函数
            }
        }

        ]
    }
}
最终我们到当前的webpack.js文件中执行就ok了

运行webpack

 1 通过配置文件运行
    在根目录运行webpack的命令，默认会去查找名称为webpack.config.js的文件执行，如果没有就会报配置信息没有配置的错误。
    命令： Webpack
 2 这时候我们可以通过运行下面的命令进行配置文件的选择
 webpack –-config  webpack.develop.config.js
你可以运行webpack  -h查看webpack的其他命令，
注意：但是我们基本上不用这种直接提供的命令，因为我们需要手动的敲打很多字母，我们现在开发通用的方法都是使用配置文件的方式运行。