这篇文章主要介绍了webpack怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 WEBpack是基于node的。先安装最新的
这篇文章主要介绍了webpack怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1.初始化
安装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('h2');
element.innerhtml = 'Hello world';
return element;
}component.js 是输出一个内容为h2元素。export default 是es6语法，表示指定默认输出。import的时候不用带大括号。
index.js
import component from './component';
document.body.appendChild(component());index.js 的作用就是引用Component模块，并在页面上输出一个h2元素。但完成这个还需要一个插件，因为目前我们还没有index.html文件。
npm install html-webpack-plugin --save-devhtml-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);
})
([
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_exports__["a"] = function () {
var element = document.createElement('h2');
element.innerHTML = 'Hello world';
return element;
};
}),
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" ])());
})
]);而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 });
var __WEBPACK_IMPORTED_MODULE_0__component__ = __webpack_require__(0);
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" ])());
})__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('h2');
element.innerHTML = 'Hello world';
return element;
}所以再模块1的定义通过"a“来获取这个方法：
代码如下:
document.body.appendChild(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__component__["a" ])());
这样就完整了，但这里使用了__webpack_require__.i 将原值返回。
// identity function for calling harmony imports with the correct context
__webpack_require__.i = function(value) { return value; };感谢你能够认真阅读完这篇文章，希望小编分享的“webpack怎么用”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!
--结束END--
本文标题: webpack怎么用
本文链接: https://www.lsjlt.com/news/79130.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0