作者:maomin9761来源:前端历劫之路 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 这是官网对webpack的解释。提到模块,模块顾名思义是独立的JS文件。与之相近的词模块化,通俗地讲就是我们平时组织和管理代码方法的一种实现。 我们先来测试一下webpack的打包。 创建项目目录 2.安装webpack依赖 or 3.安装webpack-cli依赖 这里,稍微注意一下,我们可以下载这个版本的,最新版的安装之后好像不可用。 or 1.创建项目主目录 2.创建入口文件 3.编辑入口文件 我们这里使用最简单的一行代码。 在项目根目录下键入命令: 并编辑。 我们这里使用 npx webpack 命令进行打包。打包成功! 我们来到打包好的bundle.min.js文件,会看到以下代码: 我们将注释删掉后,会精简不少! 开始实战实现一个基础版的webpack。 1.首先我们在项目根目录下创建一个文件夹。 2.然后,在maominpack文件夹下创建一个bin文件夹 3.最后在bin文件夹下创建一个maominpack.js文件 编辑如下: 首先,我们在头部指定环境为node环境,并且引入fs模块。然后,我们引入了ejs依赖,如果不是很了解ejs的,可以去官网浏览下。这里就简单的介绍一下。 我们看到在将带有绑定值的字符串赋值给template变量,我们这里使用的ejs.render(),第一个参数是需要处理的字符串,第二个参数使我们需要修改的值,是一个对象。 4.在package.json文件下编辑如下: 5.为其命令创建快捷方式 6.为其配置在其他目录也可使用此命令 7.验证打包 我们将src/main.js修改一下。 然后,键入命令: 最后,检查一下bundle.min.js: 发现,我们打包成功了。这里我们只是实现了最基础的字符串替换打包功能,webpack还有很多值得玩的特性。前言
战前准备
1.初始化
mkdir webpackmini
yarn add webpack -D
npm install webpack -D
yarn add [email protected] -D
npm install [email protected] -D
创建入口文件
mkdir src
touch main.js
console.log('maomin1');
创建编辑webpack 配置文件
touch webpack.config.js
const path = require('path');
module.exports = {
mode:'development',
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.min.js'
}
}
运行测试打包
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/ /******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/main.js":
/*!*********************!*\
!*** ./src/main.js ***!
\*********************/
/***/ (() => {
eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");
/***/ })
/******/ });
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/main.js"]();
/******/
/******/
})() ;
(() => {
var __webpack_modules__ = ({
"./src/main.js":
(() => {eval("console.log('maomin1');\n\n//# sourceURL=webpack://webpackmini/./src/main.js?");})
});
var __webpack_exports__ = {};
__webpack_modules__["./src/main.js"]();
})();
准备实战
mkdir maominpack
mkdir bin
#!/usr/bin/env node
const fs = require('fs'); const ejs = require('ejs');
const config = require('../../webpack.config.js');
const entry = config.entry;
const output = `${config.output.path}\/${config.output.filename}`;
const content = fs.readFileSync(entry,'utf8');
let template = `
(() => {
var __webpack_modules__ = ({
"<%-entry%>":
(() => {
eval("<%-content%>");
})
});
var __webpack_exports__ = {};
__webpack_modules__["<%-entry%>"]();
})() ;
`
let package = ejs.render(template,{
entry,
content
});
fs.writeFileSync(output,package);
{
"name": "maominpack",
"version": "1.0.0",
"bin":{ "maominpack":"bin/maominpack.js" },
"main": "index.js", "license": "MIT"
}
npm link
npm config ls
console.log('maomin2');
maominpack
(() => {
var __webpack_modules__ = ({
"./src/main.js":
(() => {
eval("console.log('maomin2');");
})
});
var __webpack_exports__ = {};
__webpack_modules__["./src/main.js"]();
})()
;