本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

/** * Created by zhanghaov on 2018/3/30. * 使用webpack,需要在根目录下配置webpack.config.js *///webpack.config.js 结构module.exports = {    entry:{}, //入口文件，指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始    output:{},//出口，告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件    module:{},//loader，让 webpack 能够去处理那些非 JavaScript 文件,css文件,sass、less、es6    plugins:[],//插件，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量    devServer:{}//基于node.js构建本地服务器，浏览器监听，自动刷新显示修改后的结果（js文件,修改html文件不刷新）}

先看一个简单的webpack.config.js配置

/** * Created by zhanghaov on 2018/3/24. */const webpack = require('webpack');const path = require('path');const HtmlWebpackPlugin  = require('html-webpack-plugin');module.exports = {    devtool:'eval-source-map',//Source Maps    entry: "./app/main.js",//入口文件    output: {        path: path.resolve(__dirname,'build'),//出口        filename: "bundle.js"//打包后输出文件的文件名    },    devServer:{        contentBase:'./public',//页面目录        historyApiFallback:true,//不跳转        inline:true //实时刷新    },    module: {        rules: [            {                test: /(\.jsx|\.js)$/,                use: {                    loader:'babel-loader'                },                exclude: /node_modules/            },{                test:/\.css$/,                use:[{                    loader:'style-loader',                },{                    loader:'css-loader'                }]            }        ]    },    plugins:[        new HtmlWebpackPlugin ({ //index.html 模板插件            template:__dirname + '/app/index.tmpl.html'        })    ]}