webpack

前端资源模块化管理和打包工具 代码分隔按需加载=>loader转换 >>grunt gulp browerify 处理依赖关系和加载顺序
lodash>>understore>>backbone 方法库
1.webpack-dev-server易于部署的开发服务器 webpack-dev-server --open=="scripts": {"start": "webpack-dev-server"}
进度条命令 webpack --progress --watch
2.webpack.config.js配置文件
const config={
    // 入口entry: string|Array<string> 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=config
node js commonjs模块 全局安装webpack会锁定版本
npm 标准配置打包
"scripts": {
    "build": "webpack --config webpack.config.js"
}
webpack         // 最基本的启动webpack的方法
webpack -w      // 提供watch方法；实时进行打包更新
webpack -p      // 对打包后的文件进行压缩
webpack -d      // 提供source map，方便调式代码
整体的搭建依赖于已存在
如果依赖不存在，或者引入顺序错误，应用程序将功能异常。
如果引入依赖但是并没有使用，那样就会存在许多浏览器下载好却无用的代码。
代码分离对应不同的bundle
ExtractTextWebpackPlugin来分离css。webpack -p