欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Webpack概念

程序员文章站 2022-06-23 17:10:49
webpack概念 我经常用 ,打算做一次比较详细的概念清点和梳理。从 0 配置 ,由于 (2019.07.27)暂时还没有发布。并且从 "Webpack Milestones" 上来看,截止到 7 月 27 日,完成度是 64%。有喜欢钻研的同学可以去研究一下 5,我的重点还是当前 4.X。 He ......

webpack概念

我经常用 webpack,打算做一次比较详细的概念清点和梳理。从 0 配置 webpack,由于 webpack5(2019.07.27)暂时还没有发布。并且从webpack milestones上来看,截止到 7 月 27 日,完成度是 64%。有喜欢钻研的同学可以去研究一下 5,我的重点还是当前 4.x。

hello world

由于是概念清点,先从最基础的开始。

mkdir webpack-test
cd webpack-test
npm init -y
npm i --save-dev webpack

接下来,新建一个src目录,创建index.js,然后在package.jsonscripts下加入

"scripts": {
    "webpack": "webpack"
}

接着在当前目录启动终端,输入

npm run webpack

这个时候就能看到webpacksrc入口的index.js打包到dist目录下的main.js

由于parcle宣传约定先于配置的火爆,webpack在 4.x 中也加入了默认配置,即如果没有webpack.config.js或者没有配置入口entry,则默认为src/index.js。同理,默认的输出outputs 是dist/main.js

核心概念

webpack有五个概念需要了解。

entry

entry用来告诉webpack应该从哪个 js 文件开始去寻找相关依赖,并且把它们打包成一个或者多个 bundle,最终输出到指定目录。默认值为./src/index.js,可以有多个 entry。常用的配置如下:

// 单文件
module.exports = {
  entry: "./src/file1.js"
};
// 单文件数组,不常用,默认打到一个文件中
module.exports = {
  entry: ["./src/file1.js", "./src/file2.js"]
};
// 将输出
// dist
// └── main.js
// 多文件对象,常用,会分entry入口打包,输出文件名为entry配置的key
module.exports = {
  entry: {
    file1: "./src/file1.js",
    file22: "./src/file2.js"
  }
};
// 将输出
// dist
// ├── file1.js
// └── file22.js

output

output就是用来指定把 bundle 输出到哪里的配置,默认值为./dist
output有两个配置项:

  1. filename
    filename 用于配置输出文件的文件名
  2. path
    输出文件的绝对路径
// 默认配置
const path = require("path");
module.exports = {
  output: {
    filename: "main.js",
    path: path.join(__dirname, "dist")
  }
};

如果有多个入口,则可以使用来指定文件名,或者添加 hash 等。

module.exports = {
  output: {
    filename: "[name].[hash:16].js",
    path: path.join(__dirname, "dist")
  }
};

loader

loader主要用来预处理各种文件。比如我们常用的babel-loadercss-loader
在使用之前,需要先安装

npm install --save-dev css-loader style-loader
npm install --save-dev babel-loader @babel/core @babel/preset-env

为文件加入loader配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
};

plugin

插件机制给webpack提供了更多自定义的能力。webpackplugin具有apply方法,并且会在webpack编译时调用,通过在plugin对象中对webpack提供的各种hook做操作,达到我们修改bundle的目的。

官网的一个例子:

const pluginname = "consolelogonbuildwebpackplugin";

class consolelogonbuildwebpackplugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginname, compilation => {
      console.log("webpack 构建过程开始!");
    });
  }
}

mode

mode比较简单,通常来说,有两种内置modedevelopmentproduction,可以通过webpack.config.js配置,或者通过cli参数传递。

module.exports = {
  mode: "production"
};
webpack --mode=production

设置了mode之后,nodejs进程中的process.env.node_env也会被同步设置。
webpack对于mode有一些自己的区分,在production模式下,会打开代码压缩、去除一些热更新的代码等,在生产环境中切记要将mode设置为production