webpack初识

简介

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

Webpack是加强版Browserify

从诞生之初，Webpack瞄准的就是大型单页应用（成百上千的模块）

Webpack有一定上手难度

原理

在webpack中，所有的静态资源都是模块，都可以用在依赖中。经过webpack处理后，就会变成右边的文件。

与browserify的区别

• webpack包含所有的静态资源，而browserify不包括图片这样的文件。
• webpack自动处理页面依赖关系（code splitting），browserify需要手动指定（很重要的一点）。

Webpack的两大特色：code splitting和loader

• code splitting可以自动完成，不需要手动处理。他可以根据页面自动加载相应的资源。
• loader可以处理各种类型的静态文件，并且支持串联操作。比如gulp中的.pipe()继续.pipe()就是串联操作。

配置

执行webpack命令时，它会自动找到目录下的webpack.config.js文件。所以确保这个配置文件存在。
npm install webpack -g，npm install jsx-loader --save。

module.exports = {
    entry: './app.jsx', // 指定入口文件
    output: { // 输出
        path: './', // 输出的文件路径
        filename: 'app.js' // 输出的文件名
    },
    module: {
        loaders:[
            test: /\.jsx$/, // test任意写，匹配正则表达式。
            loader: 'jsx-loader', // 将jsx转换为js
        ]
    }
}

// 多个文件
var webpack = require('webpack')

module.exports = {
    entry: {
        app: './app.jsx',  // 键随意
        app2: './app2.jsx'
    },
    output: {
        path: './',
        filename: '[name].js', // 使用name将读入文件的名字赋给输出文件
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("common.js") // 将通用代码生成common.js，需要引入weback
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader',
            }
        ]
    }
}

// 输出格式
Hash: 9fa910873e58523669b8
Version: webpack 1.14.0
Time: 2779ms
    Asset     Size  Chunks             Chunk Names
   app.js  2.24 kB       0  [emitted]  app
  app2.js  2.03 kB       1  [emitted]  app2
common.js   907 kB       2  [emitted]  common.js

小结

初学，文章记录不供参考，错了不负责。。

参考

极客学院react常用工具