Webpack使用以及分析

Webpack

What

在 webpack 里，所有类型的文件都可以是模块，包含我们最常见的 JavaScript，以及 css 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更有效地管理这些文件。

主要感觉：从入口js遍历被引用的js和css，甚至图片，json等，然后把这些文件都打包成一个js文件，最终提供给应用使用。图片可能被base64或者压缩后路径，css用js字符串实现，json用字符串实现。

How

配置

webpack配置：webpack.config.js，配置entry和output。entry用于页面入口（Index.html），output用于构建后的文件
webpack 与 browserify 一类工具的特点，它们在 HTML 文件中直接引用构建后的 js 文件，而不是源文件。

模块化

配置module:给某一类型文件定义加载器

CSS加载器

var webpack = require('webpack');

module.exports = {
    //页面入口文件配置
    entry: {
        index : './assets/js/index.js',
        test : './test/index.js'
    },
    //入口文件输出配置
    output: {
        path: './dist/js',
        filename: '[name]_bundle.js'
    },
    module: {
        //加载器配置
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            { test: /\.css$/, loader: "style!css" },
            {test: /\.less/,loader: 'style-loader!css-loader!less-loader'},
            { test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
        ]
    },
    externals: {
     // 我这么写是为了绕过webpack把所有require都覆盖了，使得我的NW.js应用中可以使用原生的node_modules(因为nw中前后端不分家）
        "webpack_require('handlebars')": "require('handlebars')",
        "webpack_require('linvodb3')": "require('linvodb3')",
        "webpack_require('level-js')": "require('level-js')"
    },
    //其它解决方案配置
    resolve: {
        root: '/', //绝对路径
        extensions: ['', '.js'],
        alias: {
            // AppStore : 'js/stores/AppStores.js'
        }
    }
};

Differ

• 对于使用webpack还是amd\cmd

webpack更倾向于SPA的开发，把几乎所有的资源文件都一次性打包，并且提供给应用。不用多次下载了

webpack可以很好的同步node_module使用，因为会有选择的把这些module给打包了

webpack还包括了一部分的less和es6编译工作。同时可以使用在gulp上。

and\cmd一类的方法比较简便，想引用什么就引用什么。更适用于单纯前端场景下的MPA使用。

• Gulp与webpack

Gulp

前端构建入门gulp教程

npm上的gulp组件

Webpack

• 对资源的处理打包，最后生成一个统一的文件作为使用。（这一点才能作为nwjs中使用）
• 打包过程中可以编译es6、jsx、sass等
• 可以对CSS、文件图片进行打包

webpack是一个前端用的库

但其实两者是可以共同使用的，例如使用gulp来处理浏览器自动刷新等，并且包括webpack。用webpack来处理编译以及打包，混淆等。

参考资料

Webpack参考：https://www.zfanw.com/blog/webpack-tutorial.html

一小时包教会 —— webpack 入门指南

官方指南