初探webpack —— 概念篇

为什么要学 webpack？

用webpack官方的话：是否可以有一种方式，不仅可以让我们编写模块，而且还支持任何模块格式（至少在我们到达 ESM 之前），并且可以同时处理资源和资产？

可以！webpack就是这样的工具。

不过这个插件确实是我21年的学习计划之一，所以近期抽时间研究一下它。然后跟着官方api和项目文件目录对照着学起了最基础的概念。毕竟了解一个项目，最有效的就是实战！

首先打卡一个vue项目，我是通过cli搭建的，所以我在根目录没有找到对应的webpack.config.js，可是却可以实现打包，我猜想肯定已经被cli植入了。那就找项目配置文件package.json，发现如下的build配置：

打开项目build文件夹，确实有个build.js文件，当然还有一堆文件，一个个点点，看看都是什么东东，反正就当认识webpack这个插件了，最后我把目标锁定到了“webpack.base.conf.js”这个文件，因为这个文件里面有官方文档的方法内容：

所以，vue项目通过cli创建的webpack在build文件夹下，以后需要修改配置可以在这里面修改！找到了文件，那么接下来继续学习webpack的内容。

官方知识将webpack的核心概念有：

1.入口(entry)
webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。默认值是 ./src/index.js

2.输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js

3.loader
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

4.插件(plugin)
插件可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

5.模式(mode)
模式通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

6.浏览器兼容性(browser compatibility)
webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。

大致整理到一个文件里面就是下面这段代码：

const path = require('path');
module.exports = {
     mode: 'development', // development 环境模式
     entry: './src/main.js', // 入口
     output: {  // 输出
           path: path.resolve(__dirname, 'dist'), // 输出到dist文件夹
           filename: 'my-first-webpack.bundle.js' //输出文件名
     },
     module: {  // 模块
            noParse: /jquery|lodash/, // 忽略大型的 library 可以提高构建性能
            rules: [  // 规则
              {
                 test: /\.txt$/, 
                 use: 'raw-loader' 
              },
              { 
                test: /\.css$/,  // 指定源类型
                use: 'css-loader'  // 指定规则
              },
              {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 指定源类型
                loader: 'url-loader', // 源代码转换规则
                options: {
                  limit: 10000,  // 转换上限
                  name: utils.assetsPath('img/[name].[hash:7].[ext]')  //转换后的位置、名字
                }
              },
            ]
      },
      plugins: [ // 多插件使用
            new ExtractTextPlugin({
              filename: 'build.min.css',
              allChunks: true,
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
            // webpack-dev-server 强化插件
            new DashboardPlugin(),
            new webpack.HotModuleReplacementPlugin(),
      ]
};

上面代码没有实际意义，主要时认知webpack的核心内容，下次见到能明白是什么意思，也不至于看不懂，没地方修改！

官方地址：https://v4.webpack.docschina.org/concepts/