.div1{
  overflow-x: auto;
  overflow-y: hidden;
}

解决前：
<div1 style='position:relative'>
  <table>
    <tbody>
    <tr>
      <td>
      <div2 style='position:relative'>
        <div3 style="position:absolute"><i class="fa fa-pencil" ></i></div3>
        <popwindow>具体内容</popwindow> /** 组件弹窗div设置有position:absolute**/
      </div2>
      </td>
    </tr>
    </tbody>
  </table>
</div1>

解决后：
<div1 style='position:relative'>
  <table>
    <tbody>
    <tr>
      <td>
      <div2>
        <div4 style='position:relative'>
          <div3 style="position:absolute"><i class="fa fa-pencil" ></i></div3>
        </div4>
        <popwindow>具体内容</popwindow> /** 组件弹窗div设置有position:absolute**/
      </div2>
      </td>
    </tr>
    </tbody>
  </table>
</div1>

const loaderUtils = require('loader-utils')
module.exports = function(source){
	//获取用户为当前loader传入的options
	const options = loaderUtils.getOptions(this)
	return source
}

this.callback( 
    // 当无法转换原内容时，给 Webpack 返回一个 Error 
    err: Error | null, 
    // 原内容转换后的内容 
    content: string | Buffer, 
    // 用于把转换后的内容得出原内容的 Source Map，方便调试 
    sourceMap?: SourceMap, 
    // 如果本次转换为原内容生成了 AST 语法树，可以把这个 AST 返回， 
    // 以方便之后需要 AST 的 Loader 复用该 AST，以避免重复生成 AST，提升性能 
    abstractSyntaxTree?: AST 
);

module.exports = function(source) { 
  // 通过 this.callback 告诉 Webpack 返回的结果 
  this.callback(null, source, sourceMaps); 
  // 当你使用 this.callback 返回内容时，该 Loader 必须返回 undefined， 
  // 以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是 return 中  
  return; 
};

module.exports = function(source) { 
    // 告诉 Webpack 本次转换是异步的，Loader 会在 callback 中回调结果 
    var callback = this.async(); 
    someAsyncOperation(source, function(err, result, sourceMaps, ast) { 
        // 通过 callback 返回异步执行后的结果 
        callback(err, result, sourceMaps, ast); 
    }); 
};

module.exports = function(source) { 
    // 在 exports.raw === true 时，Webpack 传给 Loader 的 source 是 Buffer 类型的 
    source instanceof Buffer === true; 
    // Loader 返回的类型也可以是 Buffer 类型的 
    // 在 exports.raw !== true 时，Loader 也可以返回 Buffer 类型的结果 
    return source; 
}; 
// 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据  
module.exports.raw = true; //没有该行 Loader 只能拿到字符串。

module.exports = function(source) { 
  // 关闭该 Loader 的缓存功能 
  this.cacheable(false); 
  return source; 
};

module.exports = { 
  resolveLoader:{ 
    // 去哪些目录下寻找 Loader，有先后顺序之分 
    modules: ['node_modules','./loaders/'], 
  } 
}

class BasicPlugin{ 
  // 在构造函数中获取用户给该插件传入的配置 
  constructor(options){ 
  } 
 
  // Webpack 会调用 BasicPlugin 实例的 apply 方法给插件实例传入 compiler 对象 
  apply(compiler){ 
    compiler.plugin('compilation',function(compilation) { 
    }) 
  } 
} 
 
// 导出 Plugin 
module.exports = BasicPlugin;

const BasicPlugin = require('./BasicPlugin.js'); 
module.export = { 
  plugins:[ 
    new BasicPlugin(options), 
  ] 
}

/ 
 广播出事件 
 event-name 为事件名称，注意不要和现有的事件重名 
 params 为附带的参数 
/ 
compiler.apply('event-name',params); 
 
/ 
 监听名称为 event-name 的事件，当 event-name 事件发生时，函数就会被执行。 
 同时函数中的 params 参数为广播事件时附带的参数。 
*/ 
compiler.plugin('event-name',function(params) { 
 
});

compiler.plugin('emit',function(compilation, callback) { 
    // 支持处理逻辑 
 
    // 处理完毕后执行 callback 以通知 Webpack  
    // 如果不执行 callback，运行流程将会一直卡在这不往下执行  
    callback(); 
  });

/ 当依赖的文件发生变化时会触发 watch-run 事件 
compiler.plugin('watch-run', (watching, callback) => { 
    // 获取发生变化的文件列表 
    const changedFiles = watching.compiler.watchFileSystem.watcher.mtimes; 
    // changedFiles 格式为键值对，键为发生变化的文件路径。 
    if (changedFiles[filePath] !== undefined) { 
      // filePath 对应的文件发生了变化 
    } 
    callback(); 
});

compiler.plugin('after-compile', (compilation, callback) => { 
  // 把 HTML 文件添加到文件依赖列表，好让 Webpack 去监听 HTML 模块文件，在 HTML 模版文件发生变化时重新启动一次编译 
    compilation.fileDependencies.push(filePath); 
    callback(); 
});

class Plugin { 
  apply(compiler) { 
    compiler.plugin('emit', function (compilation, callback) { 
      // compilation.chunks 存放所有代码块，是一个数组 
      compilation.chunks.forEach(function (chunk) { 
        // chunk 代表一个代码块 
        // 代码块由多个模块组成，通过 chunk.forEachModule 能读取组成代码块的每个模块 
        chunk.forEachModule(function (module) { 
          // module 代表一个模块 
          // module.fileDependencies 存放当前模块的所有依赖的文件路径，是一个数组 
          module.fileDependencies.forEach(function (filepath) { 
          }); 
        }); 
 
        // Webpack 会根据 Chunk 去生成输出的文件资源，每个 Chunk 都对应一个及其以上的输出文件 
        // 例如在 Chunk 中包含了 CSS 模块并且使用了 ExtractTextPlugin 时， 
        // 该 Chunk 就会生成 .js 和 .css 两个文件 
        chunk.files.forEach(function (filename) { 
          // compilation.assets 存放当前所有即将输出的资源 
          // 调用一个输出资源的 source() 方法能获取到输出资源的内容 
          let source = compilation.assets[filename].source(); 
        }); 
      }); 
 
      // 这是一个异步事件，要记得调用 callback 通知 Webpack 本次事件监听处理结束。 
      // 如果忘记了调用 callback，Webpack 将一直卡在这里而不会往后执行。 
      callback(); 
    }) 
  } 
}

compiler.plugin('emit', (compilation, callback) => { 
  // 设置名称为 fileName 的输出资源 
  compilation.assets[fileName] = { 
    // 返回文件内容 
    source: () => { 
      // fileContent 既可以是代表文本文件的字符串，也可以是代表二进制文件的 Buffer 
      return fileContent; 
      }, 
    // 返回文件大小 
      size: () => { 
      return Buffer.byteLength(fileContent, 'utf8'); 
    } 
  }; 
  callback(); 
});

compiler.plugin('emit', (compilation, callback) => { 
  // 读取名称为 fileName 的输出资源 
  const asset = compilation.assets[fileName]; 
  // 获取输出资源的内容 
  asset.source(); 
  // 获取输出资源的文件大小 
  asset.size(); 
  callback(); 
});

// 判断当前配置是否使用了 ExtractTextPlugin， 
// compiler 参数即为 Webpack 在 apply(compiler) 中传入的参数 
function hasExtractTextPlugin(compiler) { 
  // 当前配置所有使用的插件列表 
  const plugins = compiler.options.plugins; 
  // 去 plugins 中寻找有没有 ExtractTextPlugin 的实例 
  return plugins.find(plugin=>plugin.proto.constructor === ExtractTextPlugin) != null; 
}

class EndWebpackPlugin { 
 
  constructor(doneCallback, failCallback) { 
    // 存下在构造函数中传入的回调函数 
    this.doneCallback = doneCallback; 
    this.failCallback = failCallback; 
  } 
 
  apply(compiler) { 
    //done：在成功构建并且输出了文件后，Webpack 即将退出时发生；
    compiler.plugin('done', (stats) => { 
        // 在 done 事件中回调 doneCallback 
        this.doneCallback(stats); 
    }); 
    //failed：在构建出现异常导致构建失败，Webpack 即将退出时发生；
    compiler.plugin('failed', (err) => { 
        // 在 failed 事件中回调 failCallback 
        this.failCallback(err); 
    }); 
  } 
} 
// 导出插件  
module.exports = EndWebpackPlugin; 

//使用
module.exports = { 
  plugins:[ 
    // 在初始化 EndWebpackPlugin 时传入了两个参数，分别是在成功时的回调函数和失败时的回调函数； 
    new EndWebpackPlugin(() => { 
      // Webpack 构建成功，并且文件输出了后会执行到这里，在这里可以做发布文件操作 
    }, (err) => { 
      // Webpack 构建失败，err 是导致错误的原因 
      console.error(err);    }) 
  ] 
}

1.
rules:{
	//只对项目根目录下src目录中文件采用配置的loader
	include:path.resolve(__dirname,'src')
}
2.
resolve:{
	//使用绝对路径指明第三方模块存放的位置，减少搜索步骤
	modules:[path.resolve(__dirname,'node_module')]
}
3.
resolve:{
	//减少入口查找
	mainFilds:['main']
}
4.
resolve:{
	//减少第三方模块递归解析
	alias:{ 
		'react':path.resolve(__dirname,'./node_module/react/dist/react.min.js')
	}
}

//webpack_dll.config.js
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // JS 执行入口文件
  entry: {
    // 把 React 相关的放到一个单独的动态链接库
    react: ['react', 'react-dom'],
    // 把项目需要所有的 polyfill 放到一个单独的动态链接库
    polyfill: ['core-js/fn/object/assign', 'core-js/fn/promise', 'whatwg-fetch'],
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: path.resolve(__dirname, 'dist'),
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(__dirname, 'dist', '[name].manifest.json'),
    }),
  ],
};

webpack_dll.config.js文件中，DllPlugin中的name参数必须和output

//webpack.config.js
const path = require('path');
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  entry: {
    // 定义 入口 Chunk
    main: './main.js'
  },
  output: {
    // 输出文件的名称
    filename: '[name].js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        // 项目源码使用了 ES6 和 JSX 语法，需要使用 babel-loader 转换
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: path.resolve(__dirname, 'node_modules'),
      },
    ]
  },
  plugins: [
    // 告诉 Webpack 使用了哪些动态链接库
    new DllReferencePlugin({
      // 描述 react 动态链接库的文件内容
      manifest: require('./dist/react.manifest.json'),
    }),
    new DllReferencePlugin({
      // 描述 polyfill 动态链接库的文件内容
      manifest: require('./dist/polyfill.manifest.json'),
    }),
  ],
  devtool: 'source-map'
};

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HappyPack = require('happypack');

module.exports = {
  // JS 执行入口文件
  entry: {
    main: './main.js',
  },
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: '[name].js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        use: ['happypack/loader?id=babel'],
        // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
        exclude: path.resolve(__dirname, 'node_modules'),
      },
      {
        // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: ['happypack/loader?id=css'],
        }),
      },
    ]
  },
  plugins: [
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: 'babel',
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ['babel-loader?cacheDirectory'],
    }),
    new HappyPack({
      id: 'css',
      // 如何处理 .css 文件，用法和 Loader 配置中一样
      loaders: ['css-loader'],
    }),
    new ExtractTextPlugin({
      filename: `[name].css`,
    }),
  ],
  devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};

const HappyPack = require('happypack');
// 构造出共享进程池，进程池中包含5个子进程
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
  plugins: [
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: 'babel',
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ['babel-loader?cacheDirectory'],
      // 使用共享进程池中的子进程去处理任务
      threadPool: happyThreadPool,
    }),
    new HappyPack({
      id: 'css',
      // 如何处理 .css 文件，用法和 Loader 配置中一样
      loaders: ['css-loader'],
      // 使用共享进程池中的子进程去处理任务
      threadPool: happyThreadPool,
     }),
    new ExtractTextPlugin({
      filename: `[name].css`,
    }),
  ],
};

const path = require(‘path’);
const DefinePlugin = require(‘webpack/lib/DefinePlugin’);
const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin’);

module.exports = {
  plugins: [
    // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
    new ParallelUglifyPlugin({
      // 传递给 UglifyJS 的参数
      uglifyJS: {
        output: {
          // 最紧凑的输出
          beautify: false,
          // 删除所有的注释
          comments: false,
        },
        compress: {
          // 在UglifyJs删除没有用到的代码时不输出警告
          warnings: false,
          // 删除所有的 console 语句，可以兼容ie浏览器
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
        }
      },
    }),
  ],
};

const DefinePlugin = require('webpack/lib/DefinePlugin');

module.exports = {
  plugins: [
    new DefinePlugin({
      // 定义 NODE_ENV 环境变量为 production 
      'process.env': {
        NODE_ENV: JSON.stringify('production')//环境变量的值需要一个由双引号包裹的字符串'"production"'
      }
    }),
  ],
};

1.UglifyJsPlugin
const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');//使用内置插件
module.exports = {
  plugins: [
     new UglifyJSPlugin({
      compress: {
        // 在 UglifyES 删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      },
      output: {
        // 最紧凑的输出，默认会保留空格
        beautify: false,
        // 删除所有的注释
        comments: false,
      }
    }),
  ],
};

2.uglifyjs-webpack-plugin
const UglifyESPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  plugins: [
     new UglifyESPlugin({
      uglifyOptions: {//相比UglifyJSPlugin 多了一层
        compress: {
          // 在 UglifyES 删除没有用到的代码时不输出警告
          warnings: false,
          // 删除所有的 `console` 语句，可以兼容ie浏览器
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
        },
        output: {
          // 最紧凑的输出
          beautify: false,
          // 删除所有的注释
          comments: false,
        }
      }
    }),
  ],
};

3.压缩CSS
const path = require('path');
const {WebPlugin} = require('web-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css/,// 增加对 CSS 文件的支持
        // 提取出 Chunk 中的 CSS 代码到单独的文件中
        use: ExtractTextPlugin.extract({
          use: ['css-loader?minimize'] // 压缩 CSS 代码
        }),
      },
    ]
  },
  plugins: [
    // 用 WebPlugin 生成对应的 HTML 文件
    new WebPlugin({
      template: './template.html', // HTML 模版文件所在的文件路径
      filename: 'index.html' // 输出的 HTML 的文件名称
    }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css`,// 给输出的 CSS 文件名称加上 hash 值
    }),
  ],
};

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const {WebPlugin} = require('web-webpack-plugin');

module.exports = {
  entry: {
    // Chunk app 的 JS 执行入口文件
    app: './main.js'
  },
  output: {
    // 给输出的 JavaScript 文件名称加上 Hash 值
    filename: '[name]_[chunkhash:8].js',
    path: path.resolve(__dirname, './dist'),
    // 指定存放 JavaScript 文件的线上目录
    publicPath: '//js.cdn.com/id/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
        exclude: path.resolve(__dirname, 'node_modules'),
      },
      {
        // 增加对 CSS 文件的支持
        test: /\.css/,
        // 提取出 Chunk 中的 CSS 代码到单独的文件中
        use: ExtractTextPlugin.extract({
          // 压缩 CSS 代码
          use: ['css-loader?minimize'],
          // 指定存放 CSS 中导入的资源（例如图片）的线上目录
          publicPath: '//img.cdn.com/id/'
        }),
      },
      {
        // 增加对 PNG 文件的支持
        test: /\.png/,
        // 给输出的 PNG 文件名称加上 Hash 值
        use: ['file-loader?name=[name]_[hash:8].[ext]'],
      },
    ]
  },
  plugins: [
    // 使用 WebPlugin 自动生成 HTML，会根据publicPath用线上地址替换原来相对地址
    new WebPlugin({
      // HTML 模版文件所在的文件路径
      template: './template.html',
      // 输出的 HTML 的文件名称
      filename: 'index.html',
      // 指定存放 CSS 文件的线上目录
      stylePublicPath: '//css.cdn.com/id/',
    }),
    new ExtractTextPlugin({
      // 给输出的 CSS 文件名称加上 Hash 值
      filename: `[name]_[contenthash:8].css`,
    }),
    new DefinePlugin({
      // 定义 NODE_ENV 环境变量为 production 去除开发时才需要的部分
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // 压缩输出的 JS 代码
  ],
};

{
  "presets":[
    [
      "env",
      {
        "module":false//关闭模块转换功能，保留ES6语法
      }
    ]
  ]
}

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const {AutoWebPlugin} = require('web-webpack-plugin');

// 使用 AutoWebPlugin，自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin('pages', {
  template: './template.html', // HTML 模版文件所在的文件路径
  // 提取出所有页面公共的代码
  commonsChunk: {
    name: 'common',// 提取出公共代码 Chunk 的名称
  },
});

module.exports = {
  // AutoWebPlugin 会找为寻找到的所有单页应用，生成对应的入口配置，
  // autoWebPlugin.entry 方法可以获取到生成入口配置
  entry: autoWebPlugin.entry({
    // 这里可以加入你额外需要的 Chunk 入口
    base: './base.js'
  }),
  output: {
    filename: '[name]_[chunkhash:8].js',// 给输出的文件名称加上 hash 值
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
        exclude: path.resolve(__dirname, 'node_modules'),
      },
      {
        test: /\.css/,// 增加对 CSS 文件的支持
        // 提取出 Chunk 中的 CSS 代码到单独的文件中
        use: ExtractTextPlugin.extract({
          use: ['css-loader?minimize'] // 压缩 CSS 代码
        }),
      },
    ]
  },
  plugins: [
    autoWebPlugin,
    // 为了从 common 中提取出 base 也包含的部分,减小common体积
    new CommonsChunkPlugin({
      // 从 common 和 base 两个现成的 Chunk 中提取公共的部分
      chunks: ['common', 'base'],
      // 把公共的部分放到 base 中
      name: 'base'
    }),
    new ExtractTextPlugin({
      filename: `[name]_[contenthash:8].css`,// 给输出的 CSS 文件名称加上 hash 值
    }),
    new DefinePlugin({
      // 定义 NODE_ENV 环境变量为 production 去除 react 代码中的开发时才需要的部分
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // 压缩输出的 JS 代码
  ],
};

//oneName.js
module.exports= function(){}

//加载语句
import(/* webpackChunkName:"oneName" */ './oneName').then((oneName)=>{
  oneName()
})

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: {
    main: './main.js',
  },
  output: {
    // 为从 entry 中配置生成的 Chunk 配置输出文件的名称
    filename: '[name].js',
    // 为动态加载的 Chunk 配置输出文件的名称
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: path.resolve(__dirname, 'node_modules'),
      },
    ]
  },
  devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};

//在.babellrc中需要引入组件来识别import(*)语法
{
  "presets":[
    "env",
    "react"
  ],
  "plugins":[
    "syntax-dynamic-import"
  ]
}
//实际应用
import React, {PureComponent, createElement} from 'react';
import {render} from 'react-dom';
import {HashRouter, Route, Link} from 'react-router-dom';
import PageHome from './pages/home';

/**
 * 异步加载组件
 * @param load 组件加载函数，load 函数会返回一个 Promise，在文件加载完成时 resolve
 * @returns {AsyncComponent} 返回一个高阶组件用于封装需要异步加载的组件
 */
function getAsyncComponent(load) {
  return class AsyncComponent extends PureComponent {

    componentDidMount() {
      // 在高阶组件 DidMount 时才去执行网络加载步骤
      load().then(({default: component}) => {
        // 代码加载成功，获取到了代码导出的值，调用 setState 通知高阶组件重新渲染子组件
        this.setState({
          component,
        })
      });
    }

    render() {
      const {component} = this.state || {};
      // component 是 React.Component 类型，需要通过 React.createElement 生产一个组件实例
      return component ? createElement(component) : null;
    }
  }
}

// 根组件
function App() {
  return (
    <HashRouter>
      <div>
        <nav>
          <Link to='/'>Home</Link> | <Link to='/about'>About</Link> | <Link to='/login'>Login</Link>
        </nav>
        <hr/>
        <Route exact path='/' component={PageHome}/>
        <Route path='/about' component={getAsyncComponent(
          // 异步加载函数，异步地加载 PageAbout 组件
          () => import(/* webpackChunkName: 'page-about' */'./pages/about')
        )}
        />
        <Route path='/login' component={getAsyncComponent(
          // 异步加载函数，异步地加载 PageAbout 组件
          () => import(/* webpackChunkName: 'page-login' */'./pages/login')
        )}
        />
      </div>
    </HashRouter>
  )
}

// 渲染根组件
render(<App/>, window.document.getElementById('app'));

const path = require('path');
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    // 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
    mainFields: ['jsnext:main', 'browser', 'main']
  },
  plugins: [
    // 开启 Scope Hoisting
    new ModuleConcatenationPlugin(),
  ],
};

Vue.prototype.$mount = function(){
	//挂在组件 已生成渲染函数,被调用
	return mountComponent(this,el,hydrating) 
}

//缓存 mount
var mount = Vue.prototype.$mount;

//重新覆盖 编译的功能
Vue,prototype.$mount = function(){
	//挂在组件 生成render function
	return mount.call(this,el)
}
编译过程：字符串模板转成渲染函数
运行时：调用渲染函数
独立构建 = 编译+运行时
运行时构建 = 运行时

//模板的编译 分成parse,optimize与generate三个阶段，最终得到render function
compileToFunctions(template)
//render function生成通过new Function，可以将函数功能通过字符串传递进去生成新函数
var render = new Function(参数,函数主体内容字符串)
其中函数主体字符串的功能就是返回parse生成的抽象语法树AST

渲染函数在哪被调用
mountComponen(){
	//模板编译完成，实例挂载之前调用生命周期函数
	callHook(vm,'beforeMount') 

	初始化 updateComponent函数
		在非生产环境下config.performance为true,
		初始化 updateComponent时有进行性能追踪的相关代码
		(进行性能追踪4个场景：
		组件【初始化】时
		【编译】时模板转渲染函数时
		通过【渲染】函数生成虚拟DOM时
		【打补丁】，虚拟DOM转真实Dom时)
		vm.update(vm._render(),hydrating)
		vm._render() === vm.$options.render() //生成虚拟节点vnode
		vm.update() 把vm._render()生成的虚拟节点渲染成真实的DOM
	updateComponent 用作参数生成Watcher，即数据发生变化时，可以重新渲染DOM节点

}

（function anonymous(){//一个渲染函数
//vm.renderProxy 访问变量A就会进行拦截 
//调用proxy的has钩子函数 ，钩子函数中进行依赖收集，与生成的watcher进行绑定
	with(this){return ...变量A...}
})

//vue 对象生成
(function(global,factory){
	typeof exports === 'object' && typeof module !=='undefinded' ?module.export = factory():
	typeof define === 'function' && define.amd ? define(factory):
	(global.Vue = factory());//window.Vue cmd AMD Comonjs
})(this,function(){
	var ASSET_TYPES = [
		'components',
		'directives',
		'filters'
	]
	//全局配置对象 挂载在Vue对象上，用作接口，进行自定义策略
	(怎样处理自定义挂载在vue上的属性，和vue自身的同名属性，二者合并options时的处理方案)
	//Vue.config.optionMergeStrategies.xxxx = function(){}
	var config = {
		optionMergeStrategies:Object.create(null)
	}
	//自定义策略
	var strats = config.optionMergeStrategies
	strats.data = function(parentVal,childVal,vm,key){
        return function mergedInstanceDataFn(){

        }
	}
	//默认策略
	function defaultStrats(parentVal,childVal,vm){
		return childVal === undefined? parentVal:childVal
	}
	var has = function(obj,key){
		return obj != null && Object.hasOwnProperty.call(obj,key)
	}
	function mergeOption(parent,child,vm){
		var options = {}
		var key
		for(key in parent){ //parent=>component directive filters 本身具备的
			mergeFild(key)
		}
		for(key in child){ //child =>el data component 外部传参进来
			if(!has(parent,key)){ //拦截重复操作
				mergeFild(key)
			}
		}
		//选项的处理celve
		function mergeFild(key){
			//生成最终需要数据
			//合并策略 自定义策略 默认策略
			console.log(key)
			var strat = strats[key] || defaultStrats
			options[key] = strat(parent[key],child[key],vm)
		}

		return options
	}
	function initMixin(vue){

		Vue.prototype._init = function(options){
			var vm = this
			//合并选项 VUE.option option
			vm.$options = mergeOption(Vue.options,options||{},vm)
		}
	}
	function initGlobalAPI(Vue){
		var configDef = {};
		configDef.get = function(){
			return config
		}
		configDef.set = function(val){
			console.error('不要修改config')
		}
		//Vue.config = config 对修改config做拦截,但可以对config的属性进行操作
		//Vue.config.optionMergeStrategies 可以进行扩展自定义策略
		Object.defineProperty(Vue,'config',configDef)
	}

	function Vue(options){
		if(!(this instanceof Vue)){
			console.error('....')
		}
		this._init(options)
	}
	Vue.options = Object.create(null);
	ASSET_TYPES.foreach(function(type){
		Vue.options[type] = Object.create(null)
	})
	initMixin(Vue)
	initGlobalAPI(Vue)initGlobalAPI(Vue)
	return Vue
})

yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler //Link 所有的原生依赖

APP.js
import React from "react"; 
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation"; 
class HomeScreen extends React.Component {
     render() {
          return (
               <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> 
                    <Text>Home Screen</Text> 
               </View> ); 
    } } 
const AppNavigator = createStackNavigator(
    {
        HomeComponent: { screen: HomeScreenComponent } //screen属性设置组件路由,HomeScreen只是一个组件
        Home: HomeScreen,//直接配置页面路由
        Details: DetailsScreen
    },
    {
        initialRouteName: "Home"//指定默认路由
        defaultNavigationOptions: { //指定全局默认标题样式
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    });
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator &&
      this.navigator.dispatch( //在 App 容器中使用 dispatch，可以使用 ref 来调用 dispatch 方法
        NavigationActions.navigate({ routeName: someRouteName })
      );
  }
  render() {
    return <AppContainer
        //每当导航器管理的 navigation state 发生变化时，都会调用该函数 
        onNavigationStateChange={handleNavigationChange} 
        uriPrefix="/app"//应用可能会处理的 URI 前缀， 在处理一用于提取传递给 route 的一个 深度链接时将会用到
        ref={nav => {
          this.navigator = nav;
        }}
    />;
  }
}

static navigationOptions = {
    title: 'Home',
  };

static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

{title: '名称', value: 'name', display: true,
      shadow: {path: 'Adetail_C', key: '',title:'AAAA',submenu:[{
        path:'Adetail_C',name:'C'
      },{
        path:'Adetail_D',name:'D'
      }]}, 
    },

{ path: 'A',  name: 'A', title: 'XX管理', meta: {keepAlive: true}, component: () => import('@/pageA') },
{ path: 'AdetailRouter',  name: 'AdetailRouter', title: 'XX详情', meta: {keepAlive: true}, component: () => import('@/A-detail-router'), 
    children:[{
    path:'/Adetail_C',name: 'Adetail_C',meta: {previousMenu: 'A'}, component: () => import('@/Adetail_C')
    },{
    path:'/Adetail_D',name: 'Adetail_D',meta: {previousMenu: 'A'},component: () => import('@/Adetail_D')
    }]
},

//submenu.json
{
    Adetail:{
        title:'AAAA'
        submenu:[{
            name:'Adetail_C',//路由里配置的name
            label:'C',
            show:true //之后根据路由参数query决定是否显示该菜单
        },
        {
            name:'Adetail_  D',
            label:'D',
            show:true
        }]
    }
}

{ path: 'A',  name: 'A', title: 'XX管理', meta: {keepAlive: true}, component: () => import('@/pageA') },
{ path: 'Adetail',  name: 'Adetail', title: 'XX详情', meta: {keepAlive: true}, component: () => import('@/A-detail-router'), 
    children:[{
    path:'C/:id',name: 'Adetail_C',meta: {previousMenu: 'A'}, component: () => import('@/Adetail_C')
    },{
    path:'D/:id',name: 'Adetail_D',meta: {previousMenu: 'A'},component: () => import('@/Adetail_D')
    }]
},

gotoPage (val,index) {
    this.active = index
    this.$router.push({
        name: val.name,
        params:{id:this.$route.params.id}, //给其他子页面传递id
        query:this.$route.query//其他自定义参数
    })
},

//配置：
{title: '名称', value: 'dbname', display: true,link: {path: 'databaseDetail_outline', key: 'dbinstance_id',query:['dbtype.dbtype']}}
link属性即与跳转相关的配置，
path:跳转路由名
key:以数据哪个属性当id，字符串
query:需要传递的其他参数，字符串数组
//列表点击跳转
jump (item, val) {
     //根据key获取值，key对应的可能不是子属性，而是孙属性，或者更深层次属性，valueFromExpression函数用于获取深层属性值
    let id = valueFromExpression(item, val.link.key) 
    let router = {
        name: val.link.path,
        params: {id: id}
    }
    if(val.link.query){//根据key值组装传参对象
        router.query = val.link.query.map(key=>{return {[key]:valueFromExpression(item, key)}}).reduce((result,item)=>{return Object.assign(result,item)},{})
    }
    this.$router.push(router)
    },

//page A-detail-router
<template>
    <div class="subcontainer" v-if="submenuConfig">
      <div class="submenu">
        <!-- <div  class="subTitle" @click="goBack()">{{submenuConfig.title}}</div> -->
        <div  class="subTitle" @click="goBack()"><i class="fa fa-chevron-left"></i></div>
        <template v-for="(item,index) in submenuConfig.submenu">
          <div v-if='item.show' @click="gotoPage(item,index)" :key="index" class="subbtn" :class="active===index?'subactive':''">
            <a>{{item.label}}</a>
          </div>
        </template>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
  </div>
</template>
<script>
  import submenuText from '../../../common/submenu'
  export default { 
    name: 'submenu_detail',
    data() {
      return {
        submenuConfig:null,
        active:0
      }
    },
    mounted() {
      let routeName = this.$route.name
      this.submenuConfig = submenuText[routeName.split('_')[0]] //获取菜单配置
      this.active = this.submenuConfig.submenu.findIndex((item)=>{return item.name === routeName})
    },
    methods: {
      gotoPage (val,index) {
        this.active = index
        this.$router.push({
          name: val.name,
          params:{id:this.$route.params.id},
          query:this.$route.query
        })
      },
      goBack(){
        this.$router.push({
          name:this.$route.meta.previousMenu
        })
      }
    },
    components: {
    }
  }
</script>
<style lang="less" scoped>
  .subcontainer{
    display: flex;
    flex-grow: row  nowrap;
    justify-content: space-between;
    align-content:stretch;
    margin: -20px;
    .submenu{
      display: flex;
      flex-flow: column;
      align-content: center;
      width: 200px;
      flex:none;
      background-color: #EAEDF1;
      height: 100%;
      position: absolute;
      .subTitle{
        //内容为标题时样式
        // font-weight: bold;
        // text-indent: 20px;
        // height: 70px;
        // line-height: 70px;
        // background: #D9DEE4;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        font-weight: bold;
        height: 70px;
        line-height: 70px;
        background: #D9DEE4;
        font-size: 20px;
        color: #546478;
        text-align: center
      }
      .subTitle:hover{
        color: #0080FF;
      }
      .subbtn{
        width: 100%;
        font-size: 15px;
        text-align: center;
        padding: 10px 0px;
        a{
          color:#000;
        }
      }
      .subbtn:hover{
        background-color: #f8f8f8;
        background: #f8f8f8;
      }
      .subactive{
          background-color: #fff;
        background: #fff;
      }
    }
    .content{
      flex:1;
      padding: 20px;
      margin-left: 200px;
    }
  }
</style>

//子菜单页面
mounted() {
      if(this.$route.query['dbtype.dbtype'] != 'mysql'){
        this.$parent.submenuConfig.submenu[1].show = false
      }else{
        this.$parent.submenuConfig.submenu[1].show = true
      }
      this.getDetail(this.$route.params.id)
    },

const path = require('path');
module.export = {
	entry:'./main.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'./dist')
	}
}

{
	"plugins":[["transform-runtime",{"polyfill":false}]]
	"presents":[["es2015",{"modules":false}],"stage-4","react"]
}

modules:{
  rules:[{
    test:/\.js$/,
    use:['babel-loader']
  }]
}

npm i -D babel-core babel-loader //webpack配置相关依赖
npm i -D babel-preset-env
npm i -D babel-preset-* //配置文件中的相关依赖

"compilerOptions":{
	"module":"commonjs",//编译的代码采用的模块规范
	"target":"es5",//编译出的代码采用es哪个版本
	"sourceMap":true,//输出Source Map 以方便调试
	"importHelpers":true//禁止辅助函数重复出现在多个文件
},
"exclude":[
	"node_modules"
]

resolve:{
	extension:['.ts','.js']
}
modules:{
  rules:[{
    test:/\.ts$/,
    loader:'awesome-typescript-loader'
  }]
}

npm i -D typescript awesome-typescript-loader

//@flow /*告诉检查器这个文件需要被检查*/
function squarel(n:number):number{
	return n*n
}

"script":{
	"flow":"flow"
}

modules:{
  rules:[{
    test:/\.scss$/,
    use:['style-loader','css-loader','sass-loader']
  }]
}

module.exports = {
	plugins:[
		require('postcss-cssnext') //postcss-cssnext支持下一代css语法编写
	]
}

modules:{
  rules:[{
    test:/\.scss$/,
    use:['style-loader','css-loader','postcss-loader']
  }]
}

"compilerOptions":{
	...,
	"jsx":"react"//typescript本身支持jsx,开启JSX，支持react
},

resolve:{
	extension:['.ts','.tsx',.js'] //typescript 原生支持jsx语法，只不过jsx语法文件后缀必须是tsx
}
modules:{
  rules:[{
    test:/\.tsx?$/,//同时匹配ts,tsx后缀文件
    loader:'awesome-typescript-loader'
  }]
}

modules:{
  rules:[{
    test:/\.vue$/,
    use:['vue-loader']
  }]
}

"compilerOptions":{
	"target":"es5",//构建es5版本的js,与VUE浏览器支持保持一致
	"module":'es015',//使用es2015模块化格式
	"strict":true,//开启严格模式，对this上数据属性进行严格推断
	"moduleResolution":'node'
},

resolve:{
	extension:['.ts','.js','.vue','json'] //增加对.ts，.vue文件支持
modules:{
  rules:[{
    test:/\.ts$/,//匹配ts后缀文件
    loader:'ts-loader',
    exclude:/node_modules/,
    options:{
    	appendTsSuffixTo:[/\.vue$/] //让tsc将vue文件当成一个ts模块去处理，以解决module not found的问题，tsc本身不会处理.vue结尾文件
    }
  }]
}

declare module "*.vue"{
	import Vue from "vue";
	export default Vue
}

<script lang='ts'>//lang指明代码语法为ts
improt Vue from "vue"
export default Vue.extend({ //Vue.extend启用ts类型推断
	data(){
		return{
			msg:'hello world'
		}
	}
})
</script

<html lang="en">
  <head>
    <meta charset="utf-8">
     <!--导入chunck app 中的css代码，可知要将css单独打包一个文件-->
    <link rel="stylesheet" href="app?_inline">
    <!--在这里引入/google_analytics的js代码-->
    <script src="./google_analytics.js?_inline"></script>
  </head>
  <body>
    <div id='app'></div>
    <!--导入chunck app 中的js代码-->
    <script type="text/javascript" src="app"></script>
  </body>
</html>

const {WebPlugin} = require('web-webpack-plugin')
plugins:[
	new WebPlugin({//自动生成index.html文件
		template:'./template.html',//模板文件
		filename:'index.html'//输出文件名
	})，
	new ExtractTextPlugin({
		filename:`[name]_[contenthas:8].css` // 为输出的css文件名称加上Hash值
	})，
	new DefinePlugin({
		'process.env':{//定义NODE_ENV环境变量为production，去除源码中只有开发时才需要的部分
			NODE_ENV:JSON.stringify('production')
		}
	})，
	new UglifyJsPlugin({//压缩输出的js代码
		beautify:false,//最紧凑的输出
		comments:false,//删除所有注释
		compress:{
			warnings:false,//删除没有用到的代码时，不发出警告
			drop_console:true,//删除所有console语句，兼容IE
			collapse_vars:true,//内嵌已定义但只用到了一次的变量
			reduce_vars:true//提取出出现多次但没有定义成变量去引用的静态值
		}
	})

]

<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--在这里注入该页面所依赖但没有手动导入的CSS-->
    <!--STYLE-->
    <!--在这里引入/google_analytics的js代码-->
    <script src="./google_analytics.js?_inline"></script>
  </head>
  <body>
    <div id='app'></div>
    <!-- 在这里注入该页面所依赖但没有手动导入的JS-->
    <!--SCRIPT-->
  </body>
</html>

const {AutoWebPlugin} = require('web-webpack-plugin')
const autoWebPlugin = new AutoWebPlugin('pages',{ //pages 为各个单页的父目录A
	template:'./template.html',//模板文件
	postEntry:['./common.css'],//所有页面都依赖这份通用的CSS样式文件
	commonChunk：{
		name:'common',//提取公共代码chunk的名称
	}
})
module.exports={
	//AutoWebPlugin会为寻找到的所有单页生成对应的入口配置，
	//autoWebPlugin.entry可以获取所有由autoWebPlugin生成的入口配置
	entry:autoWebPlugin.entry({//可加入额外需要的Chunk入口})，
	plugins:[autoWebPlugin]
}

const path = require('path')
const nodeExternals = require('webpack-node-externals')
module.exports = {
	entry:'./main_server.js'
	target:'node',//目标运行环境是node.js,源码依赖的nodejs原生模块没必要打包进去
	externals:[nodeExternals()],//不打包node_modules中的第三方组件
	output:{
		libraryTarget:'commonjs2',//输出CommonJS2规范，供nodejs的http服务器代码调用
		fillname:'bundle.server.js',
		path:path(resolve(__dirname,'./dist'))
	},
	module:{
		rules:[
			{
				test:/\.js$/,
				use:['babel-loader'],
				exclude:path.resolve(__dirname,'node_modules'),
			},
			{
				test:/\.css/,
				use:['ignore-loader'],//css文件不能打包到服务端代码，影响服务端渲染性能
			}
		]
	}

}

import react,{Component} from 'react';
import 'main.css'
export class RootComponent extends Component{
	render(){
		return <h1>hello world </h1>
	}
}

import react from 'react';
import RootComponent from './rootComponent'
import {renderToString} from 'react-dom/server' //计算表示虚拟DOM的HTML形式字符串
export function render(){
	return renderToString(<RootComponent>)
}

import react from 'react';
import RootComponent from './rootComponent'
import {render} from 'react-dom' //操作浏览器DOM树展示出结果
render(<RootComponent>,window.document.getElementById('app'))

const express = require('express')
const {render } = require('./dist/bundle_server')
const app = express();
app.get('/',function(req.res){
	res.send(`
		<html lang="en">
		  <head>
		    <meta charset="utf-8">
		  </head>
		  <body>
		    <div id='app'>${render()}</div>
		    <!--导入WEBPACK输出的用于浏览器端渲染的js文件-->
		    <script src='./dist/bundle_browser.js'></script>
		  </body>
		</html> 
	`)
})
app.use(express.static('.'));
app.listen(3000,function(){
	console.log('app is listening 3000')
})

target:'electron-renderer'

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
	entry:'./src/index.js'
	output:{
		fillname:'index.js',
		path:path.resolve(__dirname,'lib'),
		libraryTarget:'commonjs2',
	},
	externals:/^(react|babel-runtime)/,
	module:{
		rules:[
		{
			test:/\.js$/,
			use:['babel-loader'],
			exclude:path.resolve(__dirname,'node_module'),
		},
		{
			test:/\.css/,
			use:ExtractTextPlugin.extract({
				use:['css-loader']
			})
		}]
	},
	plugins:[
		new ExtractTextPlugin({
			fillname:'index.css'
		})
	],
	devtool:'source-map'
}

{
	'plugins':[
		[
			'transform-runtime',//默认自动注入ES6 API的polyfill
			{
				'polyfill':false//防止使用者在其他地方注入其他polyfill库，所以关闭注入polyfill功能
			}
		]
	]
}

main:'lib/index.js',//webpack使用于构建不可分割的NPM模块，不能保持同源码结构一致例如如果打包lodash，会将所有工具函数打包进去，不适合仅用几个工具函数的场景
'jsnext:main':'src/index.js'//指出采用ES6编写的模块入口文件位置，便于实现Tree Sharking

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {WebPlugin} = require('web-webpack-plugin')
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')

module.exports = {
	entry:{
		app:'./main.js' //Chunk app 的js执行入口文件
	},
	output:{
		fillname:'[name].js',
		publicPath:'',
	},
	module:{
		rules:[
		{
			test:/\.css/,//增加对CSS文件支持，
			use:ExtractTextPlugin.extract({//提取到单独文件
				use:['css-loader']//压缩CSS代码
			})
		}]
	},
	plugins:[
		//一个WebPlugin对应一个HTML
	    new WebPlugin({
	    	template:'./template/html',//HTML模板文件所在的文件路径
	    	fillname:'index.html'//输出的HTML文件名称
	    }),
		new ExtractTextPlugin({
			fillname:'[name].css'
		}),
		new ServiceWorkerWebpackPlugin({
			//自定义的sw.js文件所在路径
			//ServiceWorkerWebpackPlugin会将文件列表注入生成的sw.js
			entry:path.join(__dirname,'sw.js')
		})
	],
	devServer:{
		//Service workers依赖HTTPs,使用devServer提供https功能
		https:true
	}
}

module.exports = {
	module:{
		rules:[
		{
			test:/\.js$/,
			exclude:/node_module/,//不检查node_module下文件
			loader:'tslint-loader',//整合typeScript代码检查
			enforce:'pre'//将执行顺序放到最前面，防止其他Loader将处理后的代码交给tslint-loader检查
		}，{
			test:/\.js$/,
			exclude:/node_module/,//不检查node_module下文件
			loader:'eslint-loader',//整合eslint检查代码
			enforce:'pre'//将执行顺序放到最前面，防止其他Loader将处理后的代码交给tslint-loader检查
		}]
	}，
	plugin:[
		new StyleLintPlugin() //整合stylelint，检查css代码，可以解析SCSS,Less
	]
}

{
	"script":{
		"precommit":"npm run lint",//git commit 前执行的脚本
		"prepush":'lint',//git push前会执行的脚本
		"lint":'eslint && stylelint'//调用eslint,stylelint检查工具
	}
}

const webpack = require('webpack')
//import webpack from 'webpack'

1.使用模块方式一
webpack({
	//webpack配置，和webpack.config.js一样
},(err,stats)=>{
	if(err || stats.hasErrors()){
		//构建过程出错
	}
	//成功执行完构建
})
2.使用模块方式二
const config = require('./webpack.config.js')
webpack(config,callback)