Comment Webpack doit-il gérer les styles ?

Cet article présente principalement le traitement des styles par webpack. Maintenant, je le partage avec vous et vous donne une référence.

Cet article présente le traitement des styles par webpack et le partage avec tout le monde. Les détails sont les suivants :

Nous pouvons introduire des fichiers de style dans js

require('myStyle.css')

À. cette fois, nous avons besoin d'introduire le chargeur webpack correspondant pour nous aider à analyser ce code.

css-loader avec style-loader

Tout d'abord, nous pouvons introduire css-loader et style-loader pour gérer l'analyse des CSS. Parmi eux, css. -loader est utilisé Pour analyser les fichiers CSS, style-loader est utilisé pour intégrer des fichiers CSS dans des fichiers js

var path = require('path')
module.exports = {
 context: path.join(__dirname, 'src')
 entry: './',
 module: {
 rules: [
  {
  test: /\.css$/,
  include: [
   path.join(__dirname, 'src')
  ],
  use: ['style-loader', 'css-loader']
  }
 ]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 }
}

Dans le code ci-dessus, l'ordre d'analyse est de droite à gauche, utilisez d'abord css-loader pour analyser Après le fichier CSS, utilisez style-loader pour l'intégrer dans le code js.

Si vous utilisez less pour écrire des styles, vous devez utiliser less-loader pour compiler les fichiers de style en fichiers CSS, puis continuer à utiliser css-loader et style-loader. De plus, le chargeur chargeur peut omettre le -loader suivant. Le code ci-dessus peut donc être abrégé en

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

Généralement, dans l'environnement de test, afin de compiler les CSS plus rapidement, cette méthode sera utilisée plus souvent, mais le fichier js compilé de cette manière sera plus gros , ce qui ne convient pas Utilisé dans un environnement de production.

Compiler dans des fichiers séparés

L'approche ci-dessus regroupera CSS et js ensemble, réduisant ainsi le nombre de requêtes réelles, mais comme le fichier js compilé est relativement volumineux, cela gaspille bande passante. Par conséquent, nous utilisons le plug-in extract-text-webpack-plugin pour compiler les fichiers CSS en fichiers indépendants. Nous pouvons utiliser CDN pour transmettre ce fichier au serveur de nœuds ou le charger à la demande, selon le cas, optimisant ainsi le lien de demande du client et accélérant la réponse de la page.

var path = require('path'),
 ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
 context: path.join(__dirname, 'src'),
 entry: './',
 module: {
 rules: [{
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ExtractTextPlugin.extract({
  fallback: 'style',
  use: 'css'
  })
 }]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 },
 plugins: [
 new ExtractTextPlugin('[name].css')
 ]
}

Grâce au code ci-dessus, nous utilisons le plug-in extract-text-webpack-plugin pour traiter tous les fichiers CSS du répertoire src. Tout d'abord, utilisons le plug-in css-loader pour analyser. le code CSS. Si l'analyse échoue, utilisez l'analyse du plug-in style -Loader, et génère enfin le fichier js correspondant dans le répertoire dist

Compatible avec les anciens navigateurs

Lorsque nous écrivions des styles, certains styles devaient être ajoutés pour différents navigateurs. Différents préfixes comme -webkit-. Maintenant que nous avons l'outil de build, nous n'avons plus besoin de prêter attention à ces préfixes. L'outil de build ajoutera automatiquement ces préfixes pour nous.

Pour webpack, nous pensons naturellement que nous devons utiliser un chargeur ou un plugin pour nous aider à faire ces choses. Après vérification, nous avons constaté que l'autoprefixer-loader a été abandonné et n'est plus recommandé. posscss

postcss est utilisé pour Le plug-in js qui convertit les styles CSS en js doit être utilisé avec d'autres plug-ins. C'est la même chose que babel6. C'est juste un convertisseur en lui-même et ne fournit pas de code. fonction d'analyse.

Ici, nous avons besoin du plugin autoprefixer pour ajouter des préfixes à nos styles. Téléchargez d’abord le module.

npm install -D autoprefixer

Ensuite, vous pouvez configurer le webpack

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

Regardez le fichier de style extrait et vous constaterez que le préfixe a été ajouté

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

De plus , préfixe automatique Vous pouvez également générer différents numéros de préfixe en fonction de la version du navigateur cible. Par exemple, si la plupart des utilisateurs de votre application utilisent une version relativement nouvelle du navigateur, vous pouvez la configurer comme suit.

postcss : [autoprefixer({ navigateurs : ['last 2 versions'] })] Le style généré sera légèrement différent, ou l'exemple ci-dessus

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

Style Compression

Pour compresser le code, nous pouvons utiliser le plug-in intégré UglifyJsPlugin de webpack, qui peut compresser à la fois le code js et le code css.

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

En fait, on ne peut pas dire qu'il compresse le code CSS. En substance, il compresse le code js puis envoie ce code dans le fichier CSS.

Utilisez CommonsChunkPlugin pour extraire le code commun

Tout d'abord, il doit être clair que CommonsChunkPlugin est utilisé lorsqu'il y a plusieurs entrées, c'est-à-dire lorsqu'il y a plusieurs entrées fichiers, ces fichiers d'entrée Il peut y avoir des codes communs, et nous pouvons extraire ces codes communs dans des fichiers indépendants. Il est très important de comprendre cela. (Il m'a fallu beaucoup de temps pour comprendre quelque chose, hélas~~~~)

Si le même fichier CSS est requis dans plusieurs entrées, nous pouvons utiliser CommonsChunkPlugin pour extraire ces fichiers de style communs dans un fichier de style indépendant.

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

Bien sûr, non seulement le CSS commun sera extrait ici, mais s'il existe du code js commun, il sera également extrait dans commons.js. Il y a un phénomène intéressant ici. Le nom du fichier CSS extrait sera la valeur de name dans le paramètre, et le nom du fichier js sera la valeur de filename.

CommonsChunkPlugin semble extraire uniquement les modules communs à tous les morceaux. S'il existe les dépendances suivantes

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

Après avoir utilisé le plug-in, vous constaterez que le fichier commons.css. n’est pas généré du tout.

Si nous avons seulement besoin d'obtenir le code commun des deux premiers morceaux, nous pouvons le faire

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js",
 "C": "./src/entry3.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js", chunks: ['A', 'B']
 }),
 ...
 ]
}

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile. tout le monde dans le futur.

Articles associés :

À propos du module child_process dans node (tutoriel détaillé)

Quelles sont les applications des processus enfants dans Node. js Scénario

Interprétation détaillée du système de fichiers et du flux dans nodeJs

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!