为什么要学 webpack?

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

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

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

初探webpack —— 概念篇-Qui-Note

首先打卡一个vue项目,我是通过cli搭建的,所以我在根目录没有找到对应的webpack.config.js,可是却可以实现打包,我猜想肯定已经被cli植入了。那就找项目配置文件package.json,发现如下的build配置:
初探webpack —— 概念篇-Qui-Note
打开项目build文件夹,确实有个build.js文件,当然还有一堆文件,一个个点点,看看都是什么东东,反正就当认识webpack这个插件了,最后我把目标锁定到了“webpack.base.conf.js”这个文件,因为这个文件里面有官方文档的方法内容:
初探webpack —— 概念篇-Qui-Note
所以,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/