Maison >interface Web >js tutoriel >webpack - explication détaillée du packager de module

webpack - explication détaillée du packager de module

零下一度original: 2017-06-26 09:48:372060parcourir

Les mots précédents

Avant l'émergence du webpack, les outils de gestion de modules et de packaging qui existaient déjà sur le marché n'étaient pas adaptés aux grands projets, notamment aux applications web monopage. La raison la plus urgente est de savoir comment maintenir la division et le stockage des diverses ressources de modules dans une base de code à grande échelle, maintenir les dépendances entre elles et les intégrer de manière transparente pour générer un contenu adapté au chargement de ressources statiques côté navigateur. Webpack est actuellement l'outil de gestion et de packaging modulaire le plus populaire pour les ressources frontales. Il peut regrouper de nombreux modules libres dans des ressources frontales adaptées au déploiement dans un environnement de production en fonction des dépendances et des règles. Vous pouvez également séparer par code les modules chargés à la demande, puis les charger de manière asynchrone lorsqu'ils sont réellement nécessaires

Webpack est riche en contenu et compliqué, ce qui n'est pas convivial pour les novices. Cet article présente les concepts importants de webpack sous la forme d'un exemple et se concentre sur la façon d'utiliser webpack

Présentation

Webpack est un packager de modules.

[Fonctionnalités]

Webpack a les fonctionnalités suivantes

Répartition du code

Webpack a deux façons d'organiser les dépendances des modules, Synchrone et asynchrone. Les dépendances asynchrones servent de points de partage pour former un nouveau bloc. Après avoir optimisé l'arborescence des dépendances, chaque bloc asynchrone est conditionné sous forme de fichier.

Loader

Webpack lui-même ne peut gérer que les modules JavaScript natifs, mais le convertisseur de chargement peut convertir différents types de ressources en modules JavaScript. De cette façon, n'importe quelle ressource peut devenir un module que Webpack peut gérer.

Analyse intelligente

Webpack dispose d'un analyseur intelligent qui peut gérer presque toutes les bibliothèques tierces, qu'elles soient sous forme de modules, CommonJS, AMD ou ordinaires Fichiers JS. Même lors du chargement de dépendances, l'expression dynamique require("./templates/" + name + ".jade") est autorisée.

Système de plug-in

Webpack dispose également d'un système de plug-in riche en fonctionnalités. La plupart des fonctions de contenu fonctionnent sur la base de ce système de plug-ins, et les plug-ins open source Webpack peuvent également être développés et utilisés pour répondre à divers besoins.

Fonctionnement rapide

Webpack utilise des E/S asynchrones et une mise en cache multi-niveaux pour améliorer l'efficacité de l'exécution, ce qui permet à Webpack de compiler incroyablement rapidement et de manière incrémentielle

[Installation]

Utilisez npm pour installer Webpack

$ npm install webpack

Un problème courant est le suivant : après avoir installé webpack, vous ne pouvez pas utiliser la commande webpack

En effet, il n'y a qu'une installation locale et pas d'installation globale. Entrez le code suivant pour effectuer une installation globale, puis exécutez

$ npm install webpack -g

Utilisez

Créez d'abord une page statique index.html et un fichier d'entrée JS Entry.js

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js?1.1.11"></script>
</body>
</html>

// entry.jsdocument.write('It works.')

Puis compilez Entry.js et Pack dans bundle.js :

$ webpack entry.js bundle.js

Le processus d'empaquetage affichera le journal :

Hash: f47511e706e3de8f2417
Version: webpack 2.6.1Time: 47ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.66 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {0} [built]

Ouvrir index.html avec un navigateur Vous verrez It works.

Ajoutez ensuite un module module.js et modifiez l'entrée entry.js :

// module.jsmodule.exports = 'It works from module.js.'

// entry.jsdocument.write('It works.')
document.write(require('./module.js')) // 添加模块

Repackage webpack entry.js bundle.js et actualisez la page pour voir les modifications It works.It works from module.js.

Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1Time: 61ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.83 kB       0  [emitted]  main
   [0] ./module.js 43 bytes {0} [built]
   [1] ./entry.js 75 bytes {0} [built]

Webpack analysera le fichier d’entrée et analysera chaque fichier contenant des dépendances. Ces fichiers (modules) sont regroupés dans bundle.js. Webpack attribue à chaque module un identifiant unique, indexe et accède au module via cet identifiant. Lorsque la page démarre, le code dans Entry.js sera exécuté en premier, et les autres modules seront exécutés lorsque require sera en cours d'exécution

Loader

Webpack lui-même peut uniquement Pour traiter les modules JavaScript, si vous souhaitez traiter d'autres types de fichiers, vous devez utiliser le chargeur pour la conversion.

Loader peut être compris comme un convertisseur de modules et de ressources. C'est lui-même une fonction qui accepte les fichiers sources comme paramètres et renvoie le résultat de la conversion. Les informations détaillées se déplacent ici

Suite à l'exemple ci-dessus, nous devons introduire un fichier CSS style.css dans la page pour utiliser require("!style-loader!css-loader!./style.css?1.1. .11"), l'ordre de lecture du code est de droite à gauche, ce qui signifie que la page d'accueil considère style.css comme un module. Chargez d'abord style.css, puis utilisez css-loader pour le lire, puis utilisez style-loader à Il est inséré dans la page

/* style.css */body { background: yellow; }

Modifier Entry.js :

require("style-loader!css-loader!./style.css?1.1.11") 
document.write('It works.')
document.write(require('./module.js'))

Installer le chargeur :

npm install css-loader style-loader

　　重新编译打包，刷新页面，就可以看到黄色的页面背景了

　　如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

　　将 entry.js 中的 require("!style-loader!css-loader!./style.css?1.1.11") 修改为 require("./style.css?1.1.11") ，然后执行

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

　　显然，这两种使用 loader 的方式，效果是一样的

配置

　　Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config选项来指定配置文件。

　　继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：

{  "name": "project",  "version": "1.0.0",  "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1"
  }
}

　　别忘了运行 npm install。然后创建一个配置文件 webpack.config.js，在下面的配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。相当于告诉webpack compiler，碰到「在require()/import语句中被解析为'.css'的路径」时，在把它们添加并打包之前，要先使用css-loader后使用style-loader去转换

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  }
}

　　同时简化 entry.js 中的 style.css 加载方式：

require('./style.css');

　　最后运行 webpack，可以看到 webpack 通过配置文件执行的结果和上一节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的

　　如果配置文件并不叫做默认的webpack.config.js，而是其他的名称，如test.js，则需要设置如下命令进行打包

webpack --config test.js

插件

　　插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。详细信息移步至此

　　想要使用一个插件，只需要require()它，然后把它添加到plugins数组中。内置插件则不需要require，直接使用即可

　　接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

　　修改 webpack.config.js，添加 plugins：

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //入口文件  output: {
    path: __dirname,//出口路径filename: 'bundle.js'//出口名称  },
  module: {
    rules: [
      {test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  plugins: [new webpack.BannerPlugin('This file is created by xiaohuochai')
  ]
}

　　然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/  // The module cache/******/  var installedModules = {};// 后面代码省略

开发环境

　　当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色

$ webpack --progress --colors

　　如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的

$ webpack --progress --colors --watch

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为红色，不用重新编译，刷新页面后，页面即发生改变

　　当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

# 安装
$ npm install webpack-dev-server -g

# 运行
$ webpack-dev-server --progress --colors

　　比如，执行以上命令后，修改'style.css'的body的背景颜色为蓝色，不用重新编译，也不用刷新页面，页面即发生改变

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à cinq utilisations de requireArticle suivant：Introduction à cinq utilisations de require

Articles Liés

Voir plus