Comment utiliser les outils de gestion et de packaging modulaires Webpack

Cette fois, je vais vous montrer comment utiliser les outils de gestion et de packaging modulaires de webpack, et quelles sont les précautions lors de l'utilisation des outils de gestion et de packaging modulaires de webpack. Voici des cas pratiques, jetons un coup d'œil.

Introduction à Webpack

Webpack est actuellement l'outil de gestion et de packaging modulaire de ressources frontales le plus populaire. Il peut regrouper de nombreux modules indépendants dans des ressources frontales cohérentes avec le déploiement de l'environnement de production en fonction des dépendances et des règles. Vous pouvez également séparer le code des modules chargés à la demande et les charger de manière asynchrone jusqu'à ce qu'ils soient réellement

nécessaires. Grâce à la conversion du chargeur, toute forme de ressource peut être considérée comme un module, comme les modules CommonJs, les modules AMD, les modules ES6, CSS, images, JSON, Coffeescript, LESS, etc.

Évolution du système de modules<script> tag</p> <pre class="brush:php;toolbar:false">&lt;script src=&quot;module1.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;module2.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;libraryA.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;module3.js&quot;&gt;&lt;/script&gt;</pre> <p style="text-align: left;">C'est la méthode de chargement de fichiers JavaScript la plus originale Si chaque fichier est considéré comme un module, alors leurs interfaces le sont généralement. exposé dans la portée globale, c'est-à-dire défini dans l'objet window </p> <p style="text-align: left;">Les appels d'interface des différents modules sont tous dans la même portée. Certains frameworks complexes utiliseront l'espace de noms <a href="http://www.php.cn/wiki/220.html" target="_blank"> </a> Les concepts sont utilisés. pour organiser les interfaces de ces modules, un exemple typique est la bibliothèque YUI. </p> <p style="text-align: left;">Cette méthode de chargement originale expose quelques inconvénients évidents : </p> <ol class=" list-paddingleft-2"> <li><p style="text-align: left;">Il est facile de provoquer des conflits de variables dans la portée globale</p></li> <li><p style="text-align: left;"> Les fichiers ne peuvent être chargés que dans l'ordre dans lequel <script> Dans les grands projets, diverses ressources sont difficiles à gérer et les problèmes accumulés à long terme conduisent à une base de code chaotique</script>

Spécification CommonJS

CommonJS est un projet né dans le but de créer un écosystème JavaScript en dehors des environnements de navigateur, comme dans les environnements de serveur et de bureau.

La spécification CommonJS est un formulaire de module défini pour résoudre le problème de portée de JavaScript, permettant à chaque module de s'exécuter dans son propre espace de noms. Le contenu principal de cette spécification est que les modules doivent exporter des variables ou des interfaces externes via module.exports et importer la sortie d'autres modules dans la portée actuelle du module via require(). Un exemple intuitif

Spécification AMD

AMD (Asynchronous Module Definition) est destiné aux environnements de navigateur Conçu parce que le système de modules CommonJS est chargé de manière synchrone, l'environnement de navigateur actuel n'est pas prêt à charger les modules de manière synchrone.

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

Le module est défini dans la fermeture via la fonction de définition, au format suivant : id est le nom du module, qui est un paramètre facultatif.

factory est le dernier paramètre, qui enveloppe l'implémentation spécifique du module, qui est une fonction ou un objet. S'il s'agit d'une fonction, sa valeur de retour est l'interface de sortie ou la valeur du module.

Quelques cas d'utilisation

Définissez un module nommé myModule, qui dépend du module jQuery :

define(id?: String, dependencies?: String[], factory: Function|Object);

Remarque : Dans webpack, le nom du module n'a qu'une portée locale. Le nom du module dans Require.js a une portée globale et peut être référencé globalement.

Définir un module anonyme sans valeur d'identifiant, généralement utilisé comme fonction de démarrage de l'application :

AMD utilise également l'instruction require() pour charger les modules, mais contrairement à CommonJS, cela nécessite deux paramètres

define('myModule', ['jquery'], function($) {
  // $ 是 jquery 模块的输出
  $('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});

Le premier paramètre [module] est un tableau dont les membres sont les modules à charger ; le deuxième paramètre de rappel est la

fonction de rappel

après un chargement réussi. Si le code précédent est réécrit sous forme AMD, il ressemblera à ceci :

math.add() et le chargement du module mathématique ne sont pas synchronisés et le navigateur ne se fige pas. Alors évidemment, AMD est plus adapté aux environnements de navigateur

define(['jquery'], function($) {
  $('body').text('hello world');
});

Actuellement, il existe deux principales bibliothèques Javascript qui implémentent la spécification AMD : require.js et curl.js

Qu'est-ce que Webpack

Webpack est un bundler de modules. Il effectuera une analyse statique basée sur les dépendances des modules, puis générera les ressources statiques correspondantes pour ces modules selon les règles spécifiées.

　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});

Webpack 的特点

1. 代码拆分

2. Loader

3. 智能解析

4. 插件系统

5. 快速运行

webpack基本使用

创建项目根目录

初始化

npm init 或 npm init -y

全局安装

npm install webpack -g

局部安装,在项目目录下安装

npm install webpack --save-dev

--save: 将安装的包的信息保存在package中

--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

如果使用web开发工具,单独安装

npm install webpack-dev-server --save-dev

基本使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

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

创建entry.js

// entry.js : 在页面中打印出一句话
document.write('It works.')

然后编译 entry.js并打包到 bundle.js文件中

// 使用npm命令 
webpack entry.js bundle.js

使用模块

1.创建模块module.js,在内部导出内容

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

2.在entry.js中使用自定义的模块

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

加载css模块

1.安装css-loader

npm install css-loader style-loader --save-dev

2.创建css文件

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

3.修改 entry.js：

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

创建配置文件webpack.config.js

1.创建文件

var webpack = require('webpack')
module.exports = {
 entry: './entry.js',
 output: {
  path: dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
    //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
   {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
 }
}

2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

//添加注释的插件
npm install --save-devbannerplugin

2.配置文件的书写

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ],
    plugins: [
      //添加注释的插件
      new webpack.BannerPlugin('This file is created by zhaoda')
    ]
  }
}

3.运行webpack

// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */

开发环境

webpack

--progress : 显示编译的进度

--colors ：　带颜色显示，美化输出

--watch　：　开启监视器，不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

npm install webpack-dev-server -g --save-dev

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

自动编译

1.安装插件

npm install --save-dev html-webpack-plugin

2.在配置文件中导入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
    //添加注释的插件
    new webpack.BannerPlugin('This file is created by zhaoda'),
    //自动编译
    new htmlWebpackPlugin({
      title: "index",
      filename: 'index.html', //在内存中生成的网页的名称
      template: './index.html' //生成网页名称的依据
    })
  ]

4.运行项目

webpack--save-dev

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用vue.js与element-ui实现菜单树形结构

如何使用JS装饰器函数

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!