Explication détaillée de la méthode de construction automatisée du terminal mobile de Webpack

Cette fois, je vais vous apporter une explication détaillée de la construction automatique de rem sur le terminal mobile de webpack Quelles sont les précautions pour la construction automatique de rem sur le terminal mobile de webpack. un cas pratique, jetons un coup d'oeil.

1 J'ai suivi l'ancien tutoriel vidéo et j'ai découvert que les différentes versions de plug-in de node npm webpack px2rem sont différentes et inutiles

2. Les tutoriels sur Internet étaient manquants et incomplets. Il m'a fallu beaucoup de temps pour comprendre. J'ai pensé à configurer manuellement le cssrem de vscode, mais je n'étais toujours pas convaincu de l'avoir reconstitué et finalement compris. La méthode suivante est proposée et j'espère qu'elle sera utile à tout le monde pour créer automatiquement des rem pour les terminaux mobiles

1 Je n'entrerai pas dans les détails sur l'installation de vue-cli, tout le monde devrait le savoir

2 Installez et configurez px2rem-loader (postcss n'est pas utilisé ici. Après avoir essayé de nombreux problèmes, j'ai décidé de l'utiliser)

La première étape : npm install px2rem-loader

Partie 2 : Ajoutez l'objet sous webpack.base.conf.js Ici, j'utilise sass, utilisez-en d'autres et modifiez-le selon les règles suivantes. Je pense que tout le monde peut le comprendre

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

Étape 3 : Ajoutez quelque chose aux plugins sous webpack.dev.conf.js. Tout le monde doit faire attention à l'attribut remUnit, qui est de 40 pixels dans le cas d'Apple 5. Je l'ai défini sur 40 ici, et certaines personnes l'ont défini sur 80. . Ici j'en ai 40. C'est à utiliser avec hotcss dont je parlerai ci-dessous

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

. Partie 4 : C'est quelque chose que beaucoup de gens ne savent pas. Beaucoup de gens manquent simplement cette étape. Recherchez le const cssLoader sous utils.js et ajoutez ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

. L'installation est maintenant terminée

Saisissez font-size:40px

Taille de la police de sortie : 1rem (sous l'iphone)

3 Nous savons tous que le rapport de pixels des appareils est différent, nous utilisons donc hotcss pour ajuster le rapport de pixels de l'appareil Lien

. Je l'ai mis dans src/assets/js/, vous pouvez suivre vos habitudes

Pour introduire une méthode, vous pouvez définir n'importe quel nom vous-même. Ici, j'ai changé hotcss.js en viewport.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

. C'est tout !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser l'interface itérateur de PHP Iterator

php décompresse le contenu du package zip en répertoire spécifié Explication détaillée des étapes

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!