一. 游戏设定

有个叫wp仔（ webpack 来的，下面也这样叫了。）的员工，在名叫Web的公司上班，工
作是处理一些文件。
我们玩家就要武装 wp仔，让他能够处理 Boss 给各种各样任务，不让他被 Boss 在开
会的时候点名批评。
那我们来看看 wp仔 的基础属性吧。
module.exports = {
  entry: __dirname +'/src/main.js',
  output: {
    path: __dirname + + '/build',
    filename: 'bundle.js'
  }
};

二. 游戏开始

小试身手
一天 Boss 跟 wp仔 说，你的打包文件技能能不能加强点啊，小心我批评你呀。
这时，我们玩家就要让 wp仔 学习新的打包技术了。到哪里找？不要慌，这游戏有个官
方资源库，什么技能书，饰品，配件，应有尽有，大家可以点资源商店，进去看看里面
的东西。
好啦，我们找到了一款 eval-source-map 的技能书，点击学习。
module.exports = {
    .... // 其他的配置
    devtool: 'eval-source-map'
};

Boss 的不满，只好加强属性。
Boss ：虽然打包是快了，但有些文件错误，你没发现吗，注意下。
wp仔 瑟瑟发抖，玩家们要帮他度过难关啊。快去资源商店看看，找找看什么帮得上
忙。
找到了一个饰品 webpack.NoEmitOnErrorsPlugin 记录错误，我们玩家就可知道哪里出
错然后去改咯，赶快带上。
modul.exports = {
    ... // 其他属性
    pilugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

Boss ：wp仔 啊，你就没发现很多重复的文件吗？而且，刚修改过的文件有没有加进去
啦，求求你别秀了。
我去，连放在中间的相同文件都发现，秦始皇的长生不老药我都不服，就服你。
还好，找到了 webpack.optimize.DedupePlugin 饰品可以去掉重复的，而 devServer
工具虽然不是在资源店，是在楼下小卖部的获得的。听说把 hot宝石放进这工具就能自
动更新打包。装上去试试。
webpack.optimize.DedupePlugin，已被移除了。
modul.exports = {
    ... // 其他属性
    devServer: {
        host: 'localhost',
        port: 8080,
        hot: true
    },
    pilugins: [
        ...
        new webpack.optimize.DedupePlugin()
    ]
}


你还要我会文言文 ？
Boss：最近表现不错。公司最近弄来了一些未来的文言文，你把它翻译成现代文吧。
什么鬼，文言文？还是未来的？我的天。
找遍资源店都没有适合，还好楼下小卖部神通广大，居然有这 babel 这逆天的装备，
不过听说要自己配置这装备的属性。
// .babelrc
{
  "presets": [
    "env",
    "stage-2"
  ],
  "plugins": ["transform-runtime"] //可以理解为装备的插槽。之前文章中有说过
简单用法。
}

// webpack.config.js
module.exports = {
    ... // 其他属性
    module: {
        rules: [
            {
              test: /\.js$/,
              loader: 'babel-loader'
            }
        ]
    }
},


https://www.jianshu.com/p/fb13b929d511
【WEBPACK】教程资源收集
--
修改:sanfei FROM 117.150.144.*
FROM 117.150.144.*