Webpack 打包 Javascript 详细介绍

本篇我们主要介绍Webpack打包Javascript。当然，除了可以打包Javascript之外，webpack还可以打包html。但是这不是我们本篇的重点。我们可以参考 Webpack HTML 打包介绍

现在让我们扩展一个项目——webpack-example（点击 Webpack 安装查看该项目的初始化），并为 entry 和 output 属性指定自定义名称。在 webpack.config.js 中，我们在 plugins 属性之前添加以下内容：

entry: {main: path.resolve(__dirname, './src/app.js'),
},
output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'deploy')
},

完整代码如下所示

webpack.config.js 文件

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');module.exports = {entry: {main: path.resolve(__dirname, './src/app.js'),},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'deploy')},plugins: [new HtmlWebpackPlugin({hash: true,title: 'Webpack - 迹忆客(jiyik.com)',})],
};

这里我们不使用 html 模板

在这里，我们将入口文件更改为 app.js，并将输出文件夹更改为 deploy 。我们还稍微调整了生成的包文件的名称。现在它将以条目的名称（“main”）开头，后跟单词“bundle”和 .js 文件扩展名。

现在我们创建 src/component.js 文件:

src/component.js

export default (text = "Hello, Webpack!!") => {const element = document.createElement("h1");element.innerHTML = text;return element;
};

接下来，我们将现在项目中的 index.js 重命名为 app.js 以此反映我们的更改，并将其内容替换为以下内容：

app.js

import component from './component';document.body.appendChild(component());

现在让我们运行 webpack，看一下发生了什么

$ npm run dev> webpack-example@1.0.0 dev /Users/jiyik/workspace/js/webpack-example
> webpack --mode developmentasset main.bundle.js 4.33 KiB [emitted] (name: main)
asset index.html 552 bytes [emitted] [compared for emit]
runtime modules 670 bytes 3 modules
cacheable modules 235 bytes./src/app.js 77 bytes [built] [code generated]./src/component.js 158 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 142 ms

运行之后我们会在项目目录中看到生成了deploy文件夹，其中包含静态html文件和js文件

此时我们在浏览器中运行 deploy/index.html 文件，结果如下：

此外，如果我们检查 index.html 的源代码，我们会看到 script 标签中 src 属性的值更新为 main.bundle.js。

此时，我们可以删除 webpack 最初生成的 dist 文件夹，因为我们不再需要它了。

将 ES6 转换成 ES5

接下来我们将了解如何将 ES6 转换为适用于所有浏览器的 ES5 的代码。让我们从运行以下命令开始：

$ npm run dev -- --devtool inline-source-map

在这里，我运行 webpack 并将 devtool 选项设置为 inline-source-map 以使代码更具可读性。这样可以更清楚地演示从 ES6 到 ES5 的代码转换。

下面我们打开 main.bundle.js

main.bundle.js 部分代码

/***/ "./src/component.js":
/*!**************************!*\!*** ./src/component.js ***!\**************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((text = "Hello, Webpack!") => {const element = document.createElement("h1");element.innerHTML = text;return element;});/***/ })/******/    });

如您所见，来自 component.js 模块的现代 ES6 特性（箭头函数和 const 声明）默认不会转换为符合 ES5 的代码。为了让我们的代码在旧浏览器中工作，我们必须添加 Babel 加载器：

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

然后在 webpack.config.js 文件中，在 output 项之后添加 module 项，如下所示

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},]
},

当我们为 webpack loader 定义规则时，通常需要定义三个主要属性：

test - 它描述了应该转换什么样的文件。
exclude - 它定义了不应该从加载器处理的文件。
use - 它告诉应该对匹配的模块使用哪个加载器。在这里，我们还可以设置加载器选项，就像我们刚刚完成的 presets 选项一样。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');module.exports = {entry: {main: path.resolve(__dirname, './src/app.js'),},output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'deploy')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}},]},plugins: [new HtmlWebpackPlugin({title: 'Webpack - 迹忆客(jiyik.com)',})],
};

然后在运行 webpack 看会生成什么样的文件

$ npm run dev -- --devtool inline-source-map> webpack-example@1.0.0 dev /Users/liuhanzeng/workspace/js/webpack-example
> webpack --mode development "--devtool" "inline-source-map"asset main.bundle.js 7.02 KiB [emitted] (name: main)
asset index.html 257 bytes [compared for emit]
runtime modules 670 bytes 3 modules
cacheable modules 301 bytes./src/app.js 76 bytes [built] [code generated]./src/component.js 225 bytes [built] [code generated]
webpack 5.54.0 compiled successfully in 1340 ms

这次 main.bundle.js 中的代码：

/***/ "./src/component.js":
/*!**************************!*\!*** ./src/component.js ***!\**************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (function () {var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "Hello, Webpack!";var element = document.createElement("h1");element.innerHTML = text;return element;
});/***/ })/******/     });

非常完美。现在我们可以使用现代 JS 功能（ES6），webpack 将转换我们的代码，以便它可以被旧浏览器执行。

完整的Webpack可以参考 Webpack 教程

Webpack 打包 Javascript 详细介绍相关推荐

什么是Webpack？（详细介绍）
Webpack webpack主要是打包,所以其核心存在两个部分,入口和出口,你可以把webpack加工想象成香肠加工厂,就是活猪进去,香肠出来的那种,但是如果每次加工都需要员工亲力亲为,那多麻烦那 ...
Webpack打包-打包详细流程
Webpack Webpack是一个现代化的静态模块打包器,支持JavaScript.CSS.图片等资源的打包.它将所有模块及其依赖项视为静态资源,并创建一个依赖关系图,将这些资源转换为有效的输出文 ...
Webpack打包流程系列一：打包JS（JavaScript）文件
前情提示 webpack是什么? 简单而言,webpack是一个模块打包器.它的主要目标是将JavaScript文件打包在一起,打包后的文件用于在浏览器中使用. 使用webpack的目的当前端项目的 ...
webpack打包---报错内存溢出javaScript heap out of memory
今天, npm run build打包时,又报内存溢出了.所以记录一下,之前查了博客有一些解释. "报错CALL_AND_RETRY_LAST Allocation failed - Jav ...
webpack打包js内存溢出:CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
使用webpack打包react项目,内存溢出: <--- JS stacktrace --->==== JS stack trace ========================== ...
安装webpack、使用webpack打包详细案例教程
使用webpack打包详细案例教程首先安装node环境,使用node中的工具npm安装webpack node.js 下载地址:http://nodejs.cn/download/ node.js安 ...
webpack打包后引用cdn的js_JS逆向:Webpack打包后的代码怎么搞？猿人学爬虫比赛第十六题详细题解...
实战地址 http://match.yuanrenxue.com/match/16 抓包分析地址栏输入地址,按下F12并回车,发现数据在这里: 查看cookie,无加密相关的字段.请求的接口倒是有 ...
webpack打包流程_了不起的 Webpack 构建流程学习指南
最近原创文章回顾: <了不起的 tsconfig.json 指南> <了不起的 Webpack HMR 学习指南(含源码分析)> <<你不知道的 Blob>番 ...
Vue详细介绍及使用（组件）
Vue详细介绍及使用一.Vue组件概念 1.基本的概念为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...

Webpack 打包 Javascript 详细介绍

将 ES6 转换成 ES5

Webpack 打包 Javascript 详细介绍相关推荐

最新文章

热门文章