每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。1.初始化安装node后,新建一个目录,比如html5。cmd中切到当前文件夹。npm init -y这个命令会创建一个默认的package.json。它包含了项目的一些配置参数,通过它可以进行初始安装。详细参数:https://docs.npmjs.com/files/package.json。不要y参数的话,会在命令框中设置各项参数,但觉得没啥必要。2.安装webpacknpm
install
webpack --save-dev
将webpack安装到当前目录。虽然npm install webpack -g 可以讲webpack安装到全局,但是容易出现一些模块找不到的错误,所以最好还是安装到当前目录下。3.目录结构webpack是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构:app包含的开发中的js文件,一个组件,一个入口。build中就是用来存放打包之后的文件的。webpack.config.js 顾名思义用来配置webpack的。package.json就不用说了。component.jsexport
default
function
() {``var
element = document.createElement(``'h1'``);``element.innerHTML =
'Hello world'``;``return
element;``}
component.js 是输出一个内容为h1元素。export default 是ES6语法,表示指定默认输出。import的时候不用带大括号。index.jsimport 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__的这句执行的。<u>复制代码</u> 代码如下: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“来获取这个方法:<u>复制代码</u> 代码如下: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的功能和部分原理,但略显复杂,且没有感受到有多大的好处。继续探索。