Partage du traitement des styles par Webpack

Cet article présente principalement le traitement des styles par webpack. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Nous pouvons introduire des fichiers de style dans js

require('myStyle.css')

À ce stade, nous devons 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 Pour l'analyse, utilisez d'abord css-loader pour analyser le fichier css, puis 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 le CSS plus rapidement, cette méthode sera davantage utilisée, mais elle est compilée comme ça Le fichier js sera relativement volumineux et ne conviendra pas à une utilisation 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 gaspillera 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, et utilisons d'abord le plug-in css-loader pour les analyser en code CSS, si l'analyse échoue, utilisez le plug-in style-loader pour analyser, et enfin générer le fichier js correspondant dans le répertoire dist

Compatible avec anciens navigateurs

Nous avions l'habitude d'écrire des styles Parfois, certains styles nécessitent des préfixes différents pour différents navigateurs, tels que -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 maintenu. 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()],
 ...
}

Vérifiez le fichier de style extrait Vous pouvez trouver que le préfixe

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

a été ajouté. De plus, le préfixe automatique peut également générer différents numéros de préfixe selon la version du navigateur cible. Par exemple, si le nombre d'utilisateurs de. votre application est volumineuse. La plupart d'entre eux utilisent des versions relativement récentes de navigateurs, vous pouvez donc configurer les éléments suivants.

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

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

Compression de style

Pour compresser le code, nous pouvons utiliser le plug-in intégré de webpack, UglifyJsPlugin, 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 vers le CSS. déposer.

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

// 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")

que vous trouverez après avoir utilisé le plug. -in, Le fichier commons.css n'est pas généré du tout.

Si nous n'avons besoin que de prendre 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']
 }),
 ...
 ]
}

Recommandations associées :

Comment utiliser les éléments externes de Webpack

Comment utiliser Webpack pour optimiser les méthodes et techniques de ressources

Optimisation des performances de Webpack

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!