读Webpack for Beginners

将JavaScript编译成一个文件可以避免多次服务器请求

可以在文件名中添加哈希字符串来破坏缓存并减少网站/应用程序的加载时间。Webpack已经为你考虑到了这些。

Webpack只会做这些吗？如果你曾经使用过像gulp或Grunt这样的构建工具，那么它们早就已经在做这个，并且做得非常好。例如，所有的JS代码都被合并编译成一个文件，并附加了哈希字符串（用于缓存），生活变得更加轻松。然而，你是否曾想过当将多个文件合并成一个时全局变量和冲突可能会导致问题，除非使用类或者将每个文件的代码包装在立即调用函数表达式中？

好吧，在webpack中，所有这些问题都已经为您解决了，无需重新发明轮子。另外，我最喜欢webpack的特性之一是它如何为您管理依赖关系，并决定哪个文件需要在另一个之前加载等等

开箱即用，webpack不需要你使用配置文件。然而，它会假设你的项目入口点是src/index，并将结果输出到dist/main.js中，经过压缩和优化以供生产使用。

development mode下webpack生成的捆绑文件，包括一些被认为是“不良实践”的部分，比如著名的eval函数！在production mode下是不会出现这种情况的。所以在开发阶段/模式中，webpack并不关心质量或性能等方面；目标是交付结果，并生成一个正常工作的代码

loader一方面告诉webpack如何解释、转换和处理你的源代码（例如，从CoffeeScript到普通JavaScript，或者从SASS到CSS）

plugin则可以做任何加载器无法完成的事情。Webpack将其视为核心的支柱。你会发现它们类似于对象，可以接受参数，并且也可以实例化以执行许多操作或添加功能到编译过程中，比如优化打包结果。

const path = require('path');
 
module.exports = {
    watch: true,
    mode: 'development',
    entry: './src/index.js',
    devtool: "cheap-module-eval-source-map",
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }
        ]
      }
  };

我们想要在浏览器开发者工具中调试代码时，如果出现任何错误，它将显示应用程序.js（即生成的捆绑文件）作为错误被触发位置而不是原始源代码文件。这使得调试变得困难甚至有时不可能

有一个文件可以生成称为源映射(source map)，顾名思义，它将我们的原始源代码与由webpack生成的捆绑源代码进行映射，在开发阶段对于我们来说非常有帮助

为什么我们要从JavaScript文件中导入CSS呢？难道把CSS单独管理不更好吗？这样做好吗？事实上，在许多情况下，从JavaScript文件中导入CSS非常有用。例如，如果你正在导入一个第三方库，比如日历或日期选择器，并且该库带有自己的样式（CSS文件），那么将JavaScript和该库的CSS同时加载到同一位置是很合理的。因为这样可以使代码与位置无关，从而更容易进行代码维护。