webpack从初始化到使用
这次给大家带来webpack从初始化到使用，webpack从初始化到使用的注意事项有哪些，下面就是实战案例，一起来看一下。
安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。
npm init -y
这个命令会创建一个默认的package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：https://docs.npmjs.com/files/package.json。
不要y参数的话，会在命令框中设置各项参数，但觉得没啥必要。
2.安装webpack
npm install webpack --save-dev
将webpack安装到当前目录。虽然npm install webpack -g 可以讲webpack安装到全局，但是容易出现一些模块找不到的错误，所以最好还是安装到当前目录下。
3.目录结构
webpack是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构：
app包含的开发中的js文件，一个组件，一个入口。build中就是用来存放打包之后的文件的。webpack.config.js 顾名思义用来配置webpack的。package.json就不用说了。
component.js
export default function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}component.js 是输出一个内容为h1元素。export default 是ES6语法，表示指定默认输出。import的时候不用带大括号。
index.js
import component from './component'; document.body.appendChild(component());
index.js 的作用就是引用Component模块，并在页面上输出一个h1元素。但完成这个还需要一个插件，因为目前我们还没有index.html文件。
npm install html-webpack-plugin --save-dev
html-webpack-plugin的用来生成html，将其也安装到开发目录下面。
4.设置 webpack 配置文件
我们需要通过webpack.config.js文件告诉webpack如何开始。配置文件至少需要一个入口和一个输出。多个页面就需要多个入口。node的path模块
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build'),
};
module.exports = {
entry: {
app: PATHS.app,
},
output: {
path: PATHS.build,
filename: '[name].js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack demo',
}),
],
};第一次看到这个配置文件是有点懵，主要是exports，分三个部分，一个入口，一个输出，一个插件。入口指向了app文件夹。默认会把包含"index.js"的文件作为入口。输出指定了build地址和一个文件名；[name]这儿表示占位符，可以看成webpack提供的一个变量。这个具体后面再看。而HtmlWebpackPlugin会生成一个默认的html文件。
5.打包
有了以上准备，直接输入 webpack 就能运行了。
这个输出包含了Hash(每次打包值都不同),Version,Time(耗时)。以及输出的文件信息。这时打开build文件夹，发现多了一个app.js和index.html文件，双击index.html：
也可以修改下package.json
{
"name": "Html5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1"
}
}指定build。在cmd中执行npm run build 得到同样的结果
出现helloword。再看下文件内容
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack demo</title> </head> <body> <script type="text/javascript" src="app.js"></script></body> </html>
默认引用了app.js。
6、解析
app.js
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 1);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony default export */ __webpack_exports__["a"] = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
/***/ })
/******/ ]);而app.js内容比较多了。整体是一个匿名函数。
(function(module) {
})([(function (){}), function() {}])app文件夹中的两个js文件成了这儿的两个模块。函数最开始是从__webpack_require__开始
return __webpack_require__(__webpack_require__.s = 1);
这里指定从模块1执行(赋值语句的返回值为其值)。而模块1的调用是通过__webpack_require__的这句执行的。
复制代码 代码如下:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
通过call调用模块的主要作用是为了把参数传过去。
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
/***/ })__webpack_require__ 每加载一个模块都会先去模块缓存中找，没有就新建一个module对象：
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};模块1中加载了模块0，
var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
__WEBPACK_IMPORTED_MODULE_0__component__ 返回的是这个模块0的exports部分。而之前Component.js的默认方法定义成了
__webpack_exports__["a"] = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
}所以再模块1的定义通过"a“来获取这个方法：
复制代码 代码如下:
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" /* default */])());
这样就完整了，但这里使用了__webpack_require__.i 将原值返回。
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };不太明白这个i函数有什么作用。这个注释也不太明白，路过的大神希望可以指点下。
小结：
webpack通过一个立即执行的匿名函数将各个开发模块作为参数初始化，每个js文件(module)对应一个编号，每个js中export的方法或者对象有各自指定的关键字。通过这种方式将所有的模块和接口方法管理起来。然后先加载最后的一个模块(应该是引用别的模块的模块)，这样进而去触发别的模块的加载，使整个js运行起来。到这基本了解了webpack的功能和部分原理，但略显复杂，且没有感受到有多大的好处。继续探索。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是webpack从初始化到使用的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
值得你花时间看的扩散模型教程，来自普渡大学
Apr 07, 2024 am 09:01 AM
Diffusion不仅可以更好地模仿，而且可以进行「创作」。扩散模型（DiffusionModel）是一种图像生成模型。与此前AI领域大名鼎鼎的GAN、VAE等算法，扩散模型另辟蹊径，其主要思想是一种先对图像增加噪声，再逐步去噪的过程。其中如何去噪还原原图像是算法的核心部分。最终算法能够从一张随机的噪声图像中生成图像。近年来，生成式AI的惊人增长将文本转换为图像生成、视频生成等领域的许多令人兴奋的应用提供了支持。这些生成工具背后的基本原理是扩散的概念，这是一种特殊的采样机制，克服了以前的方法中被
一键生成PPT！Kimi ：让「PPT民工」先浪起来
Aug 01, 2024 pm 03:28 PM
Kimi：一句话，十几秒钟，一份PPT就新鲜出炉了。PPT这玩意儿，可太招人烦了！开个碰头会，要有PPT；写个周报，要做PPT；拉个投资，要展示PPT；就连控诉出轨，都得发个PPT。大学更像是学了个PPT专业，上课看PPT，下课做PPT。或许，37年前丹尼斯・奥斯汀发明PPT时也没想到，有一天PPT竟如此泛滥成灾。吗喽们做PPT的苦逼经历，说起来都是泪。「一份二十多页的PPT花了三个月，改了几十遍，看到PPT都想吐」；「最巅峰的时候，一天做了五个PPT，连呼吸都是PPT」；「临时开个会，都要做个
CVPR 2024全部奖项公布！近万人线下参会，谷歌华人研究员获最佳论文奖
Jun 20, 2024 pm 05:43 PM
北京时间6月20日凌晨，在西雅图举办的国际计算机视觉顶会CVPR2024正式公布了最佳论文等奖项。今年共有10篇论文获奖，其中2篇最佳论文，2篇最佳学生论文，另外还有2篇最佳论文提名和4篇最佳学生论文提名。计算机视觉（CV）领域的顶级会议是CVPR，每年都会吸引大量研究机构和高校参会。据统计，今年共提交了11532份论文，2719篇被接收，录用率为23.6%。根据佐治亚理工学院对CVPR2024的数据统计分析，从研究主题来看，论文数量最多的是图像和视频合成与生成（Imageandvideosyn
从裸机到700亿参数大模型，这里有份教程，还有现成可用的脚本
Jul 24, 2024 pm 08:13 PM
我们知道LLM是在大规模计算机集群上使用海量数据训练得到的，本站曾介绍过不少用于辅助和改进LLM训练流程的方法和技术。而今天，我们要分享的是一篇深入技术底层的文章，介绍如何将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群。这篇文章来自于AI初创公司Imbue，该公司致力于通过理解机器的思维方式来实现通用智能。当然，将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群并不是一个轻松的过程，充满了探索和试错，但Imbue最终成功训练了一个700亿参数的LLM，并在此过程中积累
PyCharm社区版安装指南：快速掌握全部步骤
Jan 27, 2024 am 09:10 AM
快速入门PyCharm社区版：详细安装教程全解析导言：PyCharm是一个功能强大的Python集成开发环境（IDE），它提供了一套全面的工具，可以帮助开发人员更高效地编写Python代码。本文将详细介绍如何安装PyCharm社区版，并提供具体的代码示例，帮助初学者快速入门。第一步：下载和安装PyCharm社区版要使用PyCharm，首先需要从其官方网站上下
AI在用 | AI制作独居女孩生活Vlog，3天狂揽上万点赞量
Aug 07, 2024 pm 10:53 PM
机器之能报道编辑：杨文以大模型、AIGC为代表的人工智能浪潮已经在悄然改变着我们生活及工作方式，但绝大部分人依然不知道该如何使用。因此，我们推出了「AI在用」专栏，通过直观、有趣且简洁的人工智能使用案例，来具体介绍AI使用方法，并激发大家思考。我们也欢迎读者投稿亲自实践的创新型用例。视频链接：https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ最近，独居女孩的生活Vlog在小红书上走红。一个插画风格的动画，再配上几句治愈系文案，短短几天就能轻松狂揽上
入门学习C语言的五款编程软件
Feb 19, 2024 pm 04:51 PM
C语言作为一门广泛应用的编程语言，对于想从事计算机编程的人来说是必学的基础语言之一。然而，对于初学者来说，学习一门新的编程语言可能会有些困难，尤其是缺乏相关的学习工具和教材。在本文中，我将介绍五款帮助初学者入门C语言的编程软件，帮助你快速上手。第一款编程软件是Code::Blocks。Code::Blocks是一个免费的开源集成开发环境（IDE），适用于
技术入门者必看：C语言和Python难易程度解析
Mar 22, 2024 am 10:21 AM
标题：技术入门者必看：C语言和Python难易程度解析，需要具体代码示例在当今数字化时代，编程技术已成为一项越来越重要的能力。无论是想要从事软件开发、数据分析、人工智能等领域，还是仅仅出于兴趣学习编程，选择一门合适的编程语言是第一步。而在众多编程语言中，C语言和Python作为两种广泛应用的编程语言，各有其特点。本文将对C语言和Python的难易程度进行解析
