Webpack 基本介绍

2019-11-20 web

Webpack 是前端使用最为广泛的打包工具，可以大大提高工作效率。

简介

现在网页的功能越来越丰富，包含了很多复杂的 JavaScript 代码以及一堆的依赖包，为了简化开发复杂度，社区提供了很多好的实践方法：

  • 模块化，将一些复杂功能抽象为基本模块，然后重复使用。
  • 使用 TypeScript 类似更严格的语言进行开发，发布前再转换为 JavaScript 语言。
  • 通过 SCSS、LESS 等 CSS 预处理器，同样使得更方便开发 CSS 。

在使用这些方案的同时，意味着维护起来更加麻烦，而 Webpack 提供了一种打包机制，可以更方便管理 JavaScript 项目。Webpack 会把项目当做一个整体，通过给定主文件开始找到项目所有依赖文件，最后打包成一个或多个 JavaScript 文件。

webpack introduce

可以通过如下方式安装，包括了本地以及全局安装。

----- 本地使用
$ npm init -y
$ npm install webpack webpack-cli --save-dev

----- 全局安装
# npm install -g webpack

目前比较新的是 Webpack5 版本，依赖的 NodeJS 版本至少要 10.13.0 以上。

配置文件

有些项目管理很复杂，通过配置文件可以有效提高效率，这里在项目目录下创建文件 webpack.config.js 。

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
};

然后可以通过 npx webpack --config webpack.config.js 执行，实际上，如果不指定配置文件，默认使用的就是该文件。为了更方便使用，可以修改 package.json 配置文件，增加如下内容。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

这样可以通过 npm run build 来执行了，即使后面再增加其它参数。

除了如上管理 JavaScript 依赖之外，还可以管理 CSS、图片等资源。

其它

常用插件

  • cross-env 运行跨平台设置和使用环境变量的脚本，例如 Windows 不支持 NODE_ENV=dev 这种方式。
  • speed-measure-webpack-plugin 可以用来分析打包耗时，包括每个 plugin 和 loader 的打包耗时，从而可以对耗时较长的部分进行针对性优化。
  • html-webpack-plugin 将打包完的 js 文件自动引入 html 文件。
  • webpack-dev-server 本地起一个 http 服务，通过简单的配置还可指定其端口、热更新的开启等。
  • babel-preset-react-app 用于支持 JSX 语法，需要配置 presets: ['react-app'] 。

已知问题

当通过 mini-css-extract-plugin 处理 CSS 文件时，对应的 npm 版本为 10.2.4 ，对应 1.3.5 不会报错，而 1.6.2 就会报如下错误。

ERROR in ./src/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (/home/andy/Workspace/Servers/Bastion/web/node_modules/mini-css-extract-plugin/dist/loader.js:51:14)
 @ ./src/index.tsx 5:0-21

ERROR in ./src/pages/hello/hello.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (/home/andy/Workspace/Servers/Bastion/web/node_modules/mini-css-extract-plugin/dist/loader.js:51:14)
 @ ./src/pages/hello/index.tsx 26:0-21
 @ ./src/App.tsx
 @ ./src/index.tsx 6:0-24 7:132-135

使用 speed-measure-webpack-plugin 时，估计是版本比较老，会打印如下的 Warning 信息。

(node:207007) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
(Use `node --trace-deprecation ...` to show where the warning was created)

修改 webpack.config.js 配置文件，增加如下内容。

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap(config);

参考