Principe de mise en œuvre du chargement de style webpack-js tutoriel-php.cn

Cet article présente principalement le principe d'implémentation du chargement de style webpack. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Pour charger du CSS, vous devez utiliser les processus css-loader et style-loader @import et url dans l'importation ES6 normale. ressource externe, css-loader l'ignorera et traitera uniquement les ressources internes. Après le traitement par CSS-Loader, style-loader injectera le CSS de sortie dans le fichier d'empaquetage. CSS passe par défaut en mode en ligne et implémente l'interface HMR. Mais l'inline ne convient pas aux environnements de production (toutes les sorties sont sur la page). Vous devez également utiliser le plugin extracttextplugin pour générer un fichier CSS séparé, mais procédons d'abord étape par étape.

1. Style d'emballage

1. Installer CSS-loader, style-loader

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

Copier après la connexion

2. Modifiez webpack.config.js pour ajouter un nœud enfant de premier niveau

module:{
  rules:[{
  test:/\.css$/,
  use: ['style-loader', 'css-loader'],
  }]
 },

Copier après la connexion

L'expression régulière de test correspondra au fichier .css. L'ordre d'exécution utilisé est de droite à gauche. L'exécution du chargeur est continue, comme un pipeline, d'abord vers css-loader puis vers style-loader. chargeurs : ['style-loader', 'css-loader'] peut être compris comme : styleloader(cssloader(input)).

3. Ajoutez des styles

app/mian.css

body {
 background: cornsilk;
}

Copier après la connexion

puis introduisez

import &#39;./main.css&#39;;

Copier après la connexion

< dans index.js. 🎜>Exécutez à nouveau npm start et ouvrez

dans http://localhost:8080/ À ce moment, la couleur d'arrière-plan apparaît sur la page et le style est écrit. dans l'en-tête, à ce moment-là, si vous changez la couleur, l'interface sera mise à jour sans rafraîchissement. C'est exactement l'effet du HMR dans la section précédente. Les styles

sont également mis à jour via la méthode webpackHotUpdate.

2. Charger moins

Voyons d'abord comment charger moins.

npm install less less-loader --save-dev

Copier après la connexion

puis Modifiez le fichier de configuration :

module:{
  rules:[{
   test: /\.less$/,
 　　　　 use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;less-loader&#39;],  
  }]
 },

Copier après la connexion

puis créez un fichier less. less.less

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
 -webkit-box-shadow: @style @c;
 box-shadow:   @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
 .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
 color: saturate(@base, 5%);
 border-color: lighten(@base, 30%);
 p { .box-shadow(0 0 5px, 30%) }
}

body {
 background: cornsilk;
}

Copier après la connexion

Modifiez index.js

import &#39;./less.less&#39;;
 import component from &#39;./component&#39;;

var ele=document.createElement("p");
ele.innerHTML="this is an box";
ele.className="box";
document.body.appendChild(ele);

let demoComponent=component();
document.body.appendChild(demoComponent);

Copier après la connexion

pour obtenir l'effet :

Vous pouvez voir que le la compilation est réussie, veuillez faire attention. La seule chose est que lorsque vous utilisez moins, l'importation ne peut concerner que moins de fichiers. À ce stade, si vous importez main.css, une erreur sera signalée. Cette section donnera une démonstration simple de moins. La même chose s'applique aux autres préprocesseurs de style. Le contenu suivant continuera à être basé sur CSS.

3. Comprendre la portée CSS et le module CSS

De manière générale, la portée du CSS est globale, et nous l'utilisons souvent dans le master Plusieurs fichiers de style sont ajoutés à la page, et les fichiers de style ultérieurs écraseront les fichiers de style précédents, ce qui pose souvent des problèmes à notre débogage. Les modules CSS introduisent la portée locale via l'importation. Cela évite les conflits d’espace de noms. Le chargeur css de Webpack prend en charge les modules CSS. Comment le comprendre ? Nous l'activons d'abord dans la configuration (désactivons d'abord HMR) :

module:{
  rules:[{
  test:/\.css$/,
  use: [&#39;style-loader&#39;, {
  loader: &#39;css-loader&#39;,
   options: {
   modules: true,//让css-loader支持Css Modules。
  },
  },],

Copier après la connexion

puis définissons un nouveau style (main.css) :

body {
 background: cornsilk;
}
.redButton {
 background: red;color:yellow;
}

Copier après la connexion

Ajoutez un style au composant Présentez d’abord main.css.

import styles from &#39;./main.css&#39;;
export default function () {
 var element = document.createElement(&#39;h1&#39;);
  element.className=styles.redButton;
  element.innerHTML = &#39;Hello webpack&#39;;
 return element;
}

Copier après la connexion

À ce moment-là, nous constatons que l'interface a changé.

En regardant le style généré à droite, notre nom de style a changé. En regardant l'ensemble du processus, cela équivaut à ce que chaque nom de classe dans main.css devienne un module, qui peut être obtenu en js comme un module. Mais vous vous demandez peut-être pourquoi dois-je importer puisque je ne peux pas attribuer de valeurs directement aux éléments ? C'est une bonne question. Ajoutons un autre style

avec la même classe de nom de fichiers de style différents

other.css

.redButton {
 background:rebeccapurple;color:snow;
}

Copier après la connexion

qui a également une classe .redbutton (mais l'effet est violet), puis créez un élément p dans index.js et ajoutez-y le style redbutton.

import &#39;./main.css&#39;;
import styles from './other.css';
import component from './component';

var ele=document.createElement("p");
ele.innerHTML="this is an other button";
ele.className=styles.redButton;
document.body.appendChild(ele);

let demoComponent=component();
document.body.appendChild(demoComponent);

Copier après la connexion

Regardez à nouveau l'effet

L'image ci-dessus illustre deux problèmes. Le premier est que nous avons introduit 2 fichiers de style dans index.js. les styles sont affichés sur la page d'index, ce qui est un peu désagréable, mais nous le résoudrons plus tard. L'autre est que même si la classe redButton est incluse dans les deux fichiers de style, les deux restent indépendants. Cela évite les interférences des espaces de noms les uns avec les autres. Si vous attribuez directement

element.className="redButton";

Copier après la connexion

à ce moment-là, vous ne pourrez pas obtenir le style. Les styles appliqués directement aux éléments sont globaux par défaut.

Style global

Si vous voulez qu'un certain style soit global. Il peut être enveloppé par :global.

autre.css

:global(.redButton) {
 background:rebeccapurple;color:snow;
 border: 1px solid red;
}

Copier après la connexion

main.css

:global(.redButton) {
 background: red;color:yellow;
}

Copier après la connexion

这个时候redbutton这两个样式就会合并。需要直接通过样式名来获取。

element.className="redButton";

Copier après la connexion

组合样式

我们再修改other.css,创建一个shadowButton 样式，内部通过composes组合redbutton类。

.redButton {
 background:rebeccapurple;color:snow;
 border: 1px solid red;
}
 
.shadowButton{
 composes:redButton;
 box-shadow: 0 0 15px black;
}

Copier après la connexion

修改index.js:

var ele=document.createElement("p");
ele.innerHTML="this is an shadowButton button";
console.log(styles);
ele.className=styles.shadowButton;
document.body.appendChild(ele);

Copier après la connexion

看一下是什么效果：

日志打印出来的是styles对象，它包含了两个类名。可以看见shadowButton是由两个类名组合而成的。p的class和下面的对应。

四、输出样式文件

css嵌在页面里面不是我们想要的，我们希望能够分离，公共的部分能够分开。extracttextplugin 可以将多个css合成一个文件，但是它不支持HMR(直接注释掉hotOnly:true)。用在生产环境挺好的

npm install extract-text-webpack-plugin --save-dev

Copier après la connexion

先安装extracttextplugin这个插件，然后再webpack.config.js中进行配置：

const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
const extractTxtplugin = new ExtractTextPlugin({
 filename: &#39;[name].[contenthash:8].css&#39;,
});

const commonConfig={
 entry: {
 app: PATHS.app,
 },
 output: {
 path: PATHS.build,
 filename: &#39;[name].js&#39;,
 },
 module:{
  rules:[{
   test:/\.css$/,
   use:extractTxtplugin.extract({
   use:&#39;css-loader&#39;,
   fallback: &#39;style-loader&#39;,
   })
  }]},
 plugins: [
 new HtmlWebpackPlugin({
  title: &#39;Webpack demo&#39;,
 }),
 extractTxtplugin
 ],
}

Copier après la connexion

一开始看到这个配置，让人有点懵。首先看fileName，表示最后输出的文件按照这个格式'[name].[contenthash:8].css'，name默认是对应的文件夹名称(这里是app)，contenthash会返回特定内容的hash值，而:8表示取前8位。当然你也可以按照其他的格式写，比如直接命名：

new ExtractTextPlugin(&#39;style.css&#39;)

Copier après la connexion

而ExtractTextPlugin.extract本身是一个loader。fallback:'style-loader'的意思但有css没有被提取(外部的css)的时候就用style-loader来处理。注意到现在我们的index.js如下：

import &#39;./main.css&#39;;
import styles from './other.css';
import component from './component';

var ele=document.createElement("p");
ele.innerHTML="this is an box";
ele.className=styles.shadowButton;
document.body.appendChild(ele);

let demoComponent=component();
document.body.appendChild(demoComponent);

//HMR 接口
if(module.hot){
 module.hot.accept('./component',()=>{
  const nextComponent=component();
  document.body.replaceChild(nextComponent,demoComponent);
  demoComponent=nextComponent;
 })
}

Copier après la connexion

引入了两个css文件。

这个时候我们执行 npm run build

再看文件夹得到一个样式文件。(如果不想看到日志可以直接npm build)

但是我们在第三部分使用了CSS Modules，发现other.css的样式没有打包进来。所以，我们的webpack.config.js还要修改：

module:{
  rules:[{
   test:/\.css$/,
   use:extractTxtplugin.extract({
   use:[ {
   loader: &#39;css-loader&#39;,
   options: {
   modules: true,
  },
  }],
   fallback: &#39;style-loader&#39;,
   })
  }]},

Copier après la connexion

再次build。