Hank's Blog

var name = "window";
var test = function() {
  console.log(this.name);
};
test(); // window
var obj = {
  name: "obj",
  test: test
};
obj.test(); // obj

var obj = {
  name: "obj",
  test: test.customBind(window)
};
obj.test(); // window

Function.prototype.customBind = function(that) {
  var _this = this, // _this 指向当前被调用的函数
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1); // 将customBind函数的参数转化为数组
  return function() {
    return _this.apply(that, args);
  };
};

Function.prototype.customBind = function(that) {
  var _this = this, // _this 指向当前被调用的函数
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1); // args 是 customBind 函数的参数
  return function() {
    // slice.call(arguments, 0) 是被调用函数的参数
    return _this.apply(that, args.concat(slice.call(arguments, 0)));
  };
};

var name = "window";
var test = function(a, b) {
  console.log("作用域绑定：" + this.name);
  console.log("customBind传递的参数：" + a);
  console.log("调用函数传递的参数：" + b);
};
var obj = {
  name: "obj",
  test: test.customBind(window, "obj")
};
obj.test("obj2");
// 作用域绑定： window
// customBind传递的参数：obj
// 调用函数传递的参数：obj2

Function.prototype.bind = function(that) {
  var _this = this,
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1);
  return function() {
    return _this.apply(that, args.concat(slice.call(arguments, 0)));
  };
};

Function.prototype.bind = function (that, ...arg) {
    var _this = this
    return function name(...inArg) {
       return _this.apply(that, arg.concat(inArg))
    }
}

entry: {
  react: ['react'],
  jquery: ['jquery']
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['jquery', 'react'],
    minChunks: Infinity
  })
]

module.exports = {
    // entry: 打包的入口文件，一个字符串或者一个对象
    entry: {
        bundle: './index.js',
    },
    // output:配置打包的结果，一个对象
    output: {
        // fileName：定义输出文件名，一个字符串
        // path：定义输出文件路径，一个字符串
        path: __dirname,
        filename: '[name].js' // 这里的name就是指 entry 对象的键名，即 bundle
    },
    // module: 定义对模块的处理逻辑，一个对象
    module: {
        // rules: 定义文件加载规则，一个数组
        rules: [{
            test: /\.vue$/, // 正则表达式，用于匹配指定文件
            loader: 'vue-loader', // 加载器名字
            options: vueLoaderConfig, // 传入加载器的参数
            // include: 字符串或者数组，规定需要解析的文件夹
            include: [resolve('src')],
            // exclude：字符串或者数组，规定不需要解析的文件夹
            exclude: [resolve('node_modules')]
        }],
        // loaders: 定义一系列的加载器，一个数组
        loaders: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }],
    },
    // devtool: 规定一个开发工具来加快调试，字符串
    devtool: 'cheap-module-eval-source-map',
    // resolve: 模块解析的相关配置，一个对象
    resolve: {
        // extensions：自动补全没有后缀的文件，一个数组
        extensions: ['.js', '.vue', '.json'],
        // alias: 设置解析别名，一个对象
        alias: {
            '~': resolve('src/components'), // 配置后使 import('~') 等价于 import('src/components')
        }
    },
    // externals: 规定某些依赖不会被webpack解析，一个对象
    externals: {
        // externals中的key是import中使用的
        // externals中的value是window下调用的
        echarts: 'echarts',
        _: 'lodash'
    },
    // plugins: 定义一系列的插件，一个数组
    plugins: [
        new MyPlugin({name: 'hanger'})
    ]
};