前端资源模块化管理和打包工具 代码分隔按需加载=>loader转换 >>grunt gulp browerify 处理依赖关系和加载顺序lodash>>understore>>backbone 方法库1.webpack-dev-server易于部署的开发服务器 webpack-dev-server --open=="scripts": {"start": "webpack-dev-server"}进度条命令 webpack --progress --watch2.webpack.config.js配置文件const config={    // 入口entry: string|Array
     
       entry:''||[]    // 对象语法    // 单个属性入口    entry:{        main:''    }     // 可扩展的配置    entry:{        app:'./src/app.js',// 应用程序入口        vendors:'./src/vendors.js' // 公共库入口    }    // 输出    output:{        filename:'bundle.js',        path:__dirname+'/build' path.resolve(__dirname,'build')        // 写入到./build/bundle.js    }    // 替换     [id] [name] [hash] [chunkhash]    // 加载器loader css/ts-loader    module:{        rules: [        {test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},        {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}        ]        ==>等价于        {test: /\.css$/, [loader](/configuration/module#rule-loader): 'css-loader'}        // or equivalently        {test: /\.css$/, [use](/configuration/module#rule-use): 'css-loader'}        // or equivalently        {test: /\.css$/, [use](/configuration/module#rule-use): {        loader: 'css-loader',        options: {}        }}    }    // 使用loader的三种方式    1.简明方式    module: {    rules: [      {        test: /\.css$/,        // loaders:['style-loader','css-loader']        use: [          { loader: 'style-loader'},          {            loader: 'css-loader',            options: {              modules: true            }          }        ]      }    ]  }  2.require使用!分隔  require('style-loader!css-loader?modules!./styles.css');  3.命令行接口cli  webpack --module-bind jade --module-bind 'css=style!css'  这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader。  // 插件plugins 需要new实例  // 构建目标target hmr重载热更新  // 处理自动补全后缀      resolve: {        modules: [path.resolve(__dirname, "common"), path.resolve(__dirname, "util"), "node_modules"],        extensions: [".js", ".json", ".jsx"],        mainFiles: ["index"]    }, }module.exports=confignode js commonjs模块 全局安装webpack会锁定版本npm 标准配置打包"scripts": {    "build": "webpack --config webpack.config.js"}webpack         // 最基本的启动webpack的方法webpack -w      // 提供watch方法；实时进行打包更新webpack -p      // 对打包后的文件进行压缩webpack -d      // 提供source map，方便调式代码整体的搭建依赖于已存在如果依赖不存在，或者引入顺序错误，应用程序将功能异常。如果引入依赖但是并没有使用，那样就会存在许多浏览器下载好却无用的代码。代码分离对应不同的bundleExtractTextWebpackPlugin来分离css。webpack -p