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

webpack -- 前端 模块打包器

程序员文章站 2022-05-30 18:19:36
...

webpack

概述

模块打包机

webpack分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

用途

处理复杂的JavaScript代码和各种依赖包，处理复杂流程

  • 对 CommonJS 、 AMD 、ES6的语法做了兼容
  • 对js、css、图片等资源文件都支持打包（适合团队化开发）
    -比方你写一个js文件，另外一个人也写一个js文件，需要合并很麻烦，现在交给webpack合并很简单
  • 有独立的配置文件webpack.config.js
  • 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
  • 具有强大的Plugin（插件）接口，大多是内部插件，使用起来比较灵活
  • 模块化：将复杂的程序细化为各种小的文件
  • 预处理器：对Scss、less等css预先进行处理

扩展说明

使用流程

安装webpack

npm install -g webpack

1、创建项目

mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
touch app.js // 创建app.js文件  在windows下使用echo [fileContent]>*.*
touch main.js // 创建main.js文件
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件

项目结构为：
webpack -- 前端 模块打包器

2、基础代码

index.html是主入口，需要设置根目录并将打包后的文件导入

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

app.js是编写的模块，并依据CommonJS规范导出这个模块,这里我们以输出welcome to use webpack为例

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "welcome to use webpack!";
  return greet;
}

main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中

const greeter = require('./app.js');
document.querySelector("#root").appendChild(greeter());

项目安装

初始化

在项目根目录进行初始化，生成package.json文件

npm init

初始化过程中具有提示，在项目中根据情况进行填写。（可保证默认情况）

name: (webpackDemo) // 项目名称
version: (1.0.0) // 版本号
description: // 项目的描述
entry point: (index.js) // 入口文件
test command: // 测试命令
git repository: // git仓库
keywords: // 关键字
author: // 作者创始人
 license: (ISC) //许可:(ISC)
About to write to C:\Users\Administrator\Desktop\webpackDemo\package.json:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) // 这里直接输入yes就可以了

注：package.json文件不能有注释

webpack配置

安装命令：

npm install webpack -g // 全局安装
npm install webpack --save-dev // 项目内安装

注：
如果不想安装最新的版本那么得在webpack后面加一个@然后在填入你要安装的版本号，当然安装最新版本时可以加@版本号也可以不加@版本号
webpack存在两个版本 – webpack2和webpack4

webpack2
安装

npm install [email protected] --save-dev

webpack4
webpack4版需要去额外安装webpack-cli

npm install [email protected] --save-dev
npm install [email protected] webpack-cli --save-dev

打包

终端打包 – 基本使用：

// webpack2的命令
node_modules/.bin/webpack app/main.js common/index.js 
// webpack4的命令
node_modules/.bin/webpack app/main.js -o common/index.js

注：

  • app/main.js：是入口文件的路径，本文中就是上述main.js的路径
  • common/index.js：是打包文件的存放路径

打包错误

D:\ideaTestProjects\webpackDemo>node_modules/.bin/webpack app/main.js common/index.js
'node_modules' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

错误原因：在windows系统中要用反斜杠

D:\ideaTestProjects\webpackDemo>node_modules\.bin\webpack app\main.js -o common\index.js
Hash: 5f35561074edf10c33c0
Version: webpack 4.44.1
Time: 570ms
Built at: 2020/08/13 上午11:35:39
   Asset       Size  Chunks             Chunk Names
index.js  930 bytes       0  [emitted]  main
Entrypoint main = index.js
[0] ./app/main.js 0 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

打包后文档：
index.js

!(function(e) {
  var t = {};
  function r(n) {
    if (t[n]) return t[n].exports;
    var o = (t[n] = { i: n, l: !1, exports: {} });
    return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
  }
  (r.m = e),
    (r.c = t),
    (r.d = function(e, t, n) {
      r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
    }),
    (r.r = function(e) {
      "undefined" != typeof Symbol &&
        Symbol.toStringTag &&
        Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
        Object.defineProperty(e, "__esModule", { value: !0 });
    }),
    (r.t = function(e, t) {
      if ((1 & t && (e = r(e)), 8 & t)) return e;
      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
      var n = Object.create(null);
      if (
        (r.r(n),
        Object.defineProperty(n, "default", { enumerable: !0, value: e }),
        2 & t && "string" != typeof e)
      )
        for (var o in e)
          r.d(
            n,
            o,
            function(t) {
              return e[t];
            }.bind(null, o)
          );
      return n;
    }),
    (r.n = function(e) {
      var t =
        e && e.__esModule
          ? function() {
              return e.default;
            }
          : function() {
              return e;
            };
      return r.d(t, "a", t), t;
    }),
    (r.o = function(e, t) {
      return Object.prototype.hasOwnProperty.call(e, t);
    }),
    (r.p = ""),
    r((r.s = 0));
})([function(e, t) {}]);

通过配置文件webpack.config.js来使用webpack

Webpack拥有很多其它的比较高级的功能，这些功能其实都可以通过命令行模式实现，但是在终端中进行复杂的操作，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。

在当前项目webpackDemo文件夹下新创建一个文件webpack.config.js,写入简单的配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径

// webpack2的配置
module.exports = {
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}
// webpack4的配置
module.exports = {
    // webpack4需要添加这个配置，development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

有了这个配置之后，再打包文件，只需在终端里运行webpack(全局情况下)或**node_modules/.bin/webpack(非全局安装需使用)**命令就可以了，不需要再命令行打入主入口和打包文件的路径了，这条命令会自动引用webpack.config.js文件中的配置选项。

node_modules\.bin\webpack
更方便的打包操作

npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.6"
  }
}

注：npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对应的命令，

相关标签： 工具

上一篇： 公主病逝驸马遭殃，唐朝唯一一个以皇后之礼葬入昭陵的公主！

下一篇： oracle创建表和约束的SQL语句

推荐阅读