webpack

webpack是什么？

    webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，

它能Grunt/Gulp所有基本功能。

    webpack是一款模块加载器兼打包工具，

它的功能就是能把各种资源(比如：JS[含JSX],coffee,css[less/sass],图片)都作为模块来使用和处理。

为什么要使用webpack?

    因为网页功能越丰富的应用，它们就拥有更复杂的JavaScript代码和一大堆 依赖包。为了简化前端开发的复杂度，我们可以把复杂的程序细化为小的文件，可以用Sass,Less预处理器等等方法。

    这些方法虽然大大提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让

浏览器识别，而手动处理有非常繁琐，但是前端的打包工具的出现解决了这些需求而不用手动处理。

我们为什么要使用打包工具？原因和原理？

    因为现在js代码被使用在页面上。添加了很多内容在浏览器上。

对于模块的组织，通常有这几种方法：

1.写在外部js文件中，以script标签的形式引入到页面中进行加载。

2. CommonJS进行加载（ NodeJS就使用这种方式）

3. AMD进行加载（ require.js使用这种方式）

4. ES6模块

思考：为什么只有js需要被模块化管理，前台的很多预编译内容，不需要管理吗？

基于以上的思考，webpack项目有如下几个目标：

将依赖树拆分，保证按需加载

保证初始加载的速度

所有静态资源可以被模块化

可以整合第三方的库和模块

可以构造大系统

webpack的特点

1.丰富的插件，方便进行开发工作

2.大量的加载器，包括加载各种静态资源

3.代码分割，提供按需加载的能力

4.发布工具

webpack的优势/点

1. 支持commonJS和AMD模块。
2. 支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
3. 可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
4. 使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。

1.webpack是以 commonJS的形式来书写脚本，但对 AMD/CMD的支持也很全面，方面旧项目进行代码迁移。

2.能被模块化的不仅仅是JS。

3.开发便捷，能替代部分grunt/gulp的工作，比如打包，压缩混淆，图片转base64等。

4.扩展性强，插件机制完善，特别是支持react热插拔（见react-hot-loader）的功能让人眼前一亮。

1. 首先在node环境下Install webpack

2.然后进行对webpack的配置

每个项目下都必须配置一个webpack.config.js，它的作用如同常规的gulpfile.js/Gruntfile.js,就是一个配置项，

告诉webpack它需要做什么

例子：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

1.plugins是插件项，这里我们使用了一个CommonsChunkPlugin的插件，它用于提取多个入口文件的

公共脚本部分，然后生成一个common.js来方便多页面之间进行复用。

2.entry是页面入口文件配置，output是对应输出项配置（即入口文件最终要生成什么名字的文件，存放到哪里）

3.module.loaders是最关键的一块配置。它告知webpack每一种文件都需要使用什么加载器

来处理。所有加载器需要使用npm来加载

4.最后是resolve配置，配置查找模块的路径和扩展名和别名（方便书写）

webpack目录：

src//存放源代码

dist//开发时引用的代码

tests//测试用例代码

build//构建完毕可以发布的代码

webpack和grunt/gulp的区别：