Webpack基础系列---初识篇

帅的被人砍了
121 阅读3分钟

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战

什么是webpack?

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

核心概念

在快速开始之前我们需要了解几个核心概念，以下分别介绍入口、出口、loader、plugin等概念。

入口(entry)

**入口起点(entry point)**会告诉webpack从哪个模块开始，去分析构建其内部依赖图，从起点开始，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。可以在webpack.config.js中通过entry属性进行配置一个或多个入口，默认值是src/index.js。

module.exports = {
  entry: './path/to/my/entry/file.js',
};

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 生成后文件的路径
    filename: 'my-first-webpack.bundle.js', // 指定生成的文件名称
  },
};

loader

最开始webpack是用来打包JavaScript文件的，不认识图片、css等文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [
      { 
        test: /.txt$/,  // 匹配需要转换的文件
        use: 'raw-loader'  // 用什么loader去处理转换这些文件
      }
    ],
  },
};

在modules对象中定义rules属性，里面必须包含test和use两个属性。目的是告诉webpack编译器在解析到import/require(xxx.txt)文件时用raw-loader转换一下。

插件(plugin)

loader 用于转换某些类型的模块（其他模块不会被执行），而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中就好了。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

模式(mode)

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

module.exports = {
  mode: 'production',
};

快速使用

了解了上面这些核心概念后我们来使用一下webpack就简单了，三分钟快速入门。

首先创建一个目录如webpack-demo，执行命令npm init -y初始化一个环境，然后执行npm install webpack webpack-cli --save-dev安装webpack依赖。建立如下的目录结构

 webpack-demo
 |- package.json
 |- index.html
 |- /src
   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json

"scripts": {
    "build": "webpack"
  },

执行npm run build后将对文件进行打包生成./dist/main.js文件，就是我们打包后的文件。

$ npm run build

...

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1940 ms

如何自定义我们的入口文件和打包后的文件路径和文件名等其他东西呢，可以参考核心概念进行配置，我们的文章就到这里了，下面我们会来看loader、plugin以及其他内容。

avatar
文章
阅读
粉丝