Comment utiliser les outils de gestion et de packaging modulaires Webpack-js tutoriel-php.cn

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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script src="module1.js"></script> <script src="module2.js"></script> <script src="libraryA.js"></script> <script src="module3.js"></script></pre><div class="contentsignin">Copier après la connexion</div></div> <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="//m.sbmmt.com/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);

Copier après la connexion

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);

Copier après la connexion

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) {});

Copier après la connexion

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');
});

Copier après la connexion

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);
　　});

Copier après la connexion

Webpack 的特点

代码拆分
Loader
智能解析
插件系统
快速运行

webpack基本使用

创建项目根目录

初始化

npm init 或 npm init -y

Copier après la connexion

全局安装

npm install webpack -g

Copier après la connexion

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

npm install webpack --save-dev

Copier après la connexion

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

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

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

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

Copier après la connexion

基本使用

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

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

Copier après la connexion

创建entry.js

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

Copier après la connexion

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

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

Copier après la connexion

使用模块

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

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

Copier après la connexion

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

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

Copier après la connexion

加载css模块

1.安装css-loader

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

Copier après la connexion

2.创建css文件

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

Copier après la connexion

3.修改 entry.js：

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

Copier après la connexion

创建配置文件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'}
  ]
 }
}

Copier après la connexion

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

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

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

Copier après la connexion

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')
    ]
  }
}

Copier après la connexion

3.运行webpack

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

Copier après la connexion

开发环境

webpack

--progress : 显示编译的进度

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

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

12.4.7.1. webpack-dev-server

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

1.安装包

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

Copier après la connexion

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

Copier après la connexion

自动编译

1.安装插件

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

Copier après la connexion

2.在配置文件中导入包

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

Copier après la connexion

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

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

Copier après la connexion

4.运行项目

webpack--save-dev

Copier après la connexion

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