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="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>
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'utilisationDéfinissez un module nommé myModule, qui dépend du module jQuery :define(id?: String, dependencies?: String[], factory: Function|Object);
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) {});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 navigateurdefine(['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 的特点
代码拆分
Loader
智能解析
插件系统
快速运行
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中文网其它相关文章！
推荐阅读：
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
