Ausführliche Erläuterung der Schritte zum automatischen Erstellen von rem für mobile Webpack-Terminals

Dieses Mal werde ich Ihnen die Schritte zum automatischen Erstellen von REM für das Webpack-Mobilterminal ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die automatische Erstellung von REM für das Webpack-Mobilterminal? Ein praktischer Fall, werfen wir einen Blick darauf.

Ich glaube, dass viele Freunde ihre mobilen Projekte automatisch in rem konvertieren möchten. Dies entspricht dem Frontend-Trend. Es ist sehr umständlich, Änderungen per Handschrift oder per Editor vorzunehmen -ins. Ich habe viele Methoden im Internet durchsucht und die folgenden Probleme gefunden:

1 Ich habe das alte Video-Tutorial verfolgt und festgestellt, dass die verschiedenen Plug-in-Versionen von node npm webpack px2rem ist anders und überhaupt nutzlos

2 Die Tutorials im Internet waren mangelhaft und unvollständig, und ich habe lange darüber nachgedacht, das CSSREM von vscode manuell festzulegen, aber das habe ich getan Ich bin immer noch nicht überzeugt, also habe ich alles zusammengesetzt und schließlich die folgende Methode ausgearbeitet, von der ich hoffe, dass sie allen bei der Automatisierung der REM-Konstruktion für mobile Endgeräte hilfreich sein wird

1 Ich habe gewonnen. Ich gehe nicht im Detail auf die Installation von vue-cli ein, jeder sollte es wissen

2 px2rem-loader installieren und konfigurieren (ich habe hier viele Probleme ohne Postcss ausprobiert, mich aber für dieses entschieden)

Schritt eins: npm install px2rem-loader

Teil zwei: webpack.base.conf Verwenden Sie hier andere und ändern Sie sie gemäß den folgenden Regeln

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

Schritt 3: Fügen Sie ein Plugin unter webpack.dev.conf.js hinzu. Jeder muss auf das Attribut von remUnit achten, das im Fall von Apple 5 40 Pixel beträgt. Ich habe es hier auf 40 eingestellt. und einige Leute setzen es auf 80. Die 40 hier ist für die Verwendung mit hotcss. Ich werde weiter unten darüber sprechen.

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

Teil 4: Das ist etwas, was viele Leute nicht wissen. Viele Leute verpassen diesen Schritt. Suchen Sie den const cssLoader unter utils.js und fügen Sie ?importLoaders=1

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

Bis hierhin ist die Installation abgeschlossen

Eingabefont-size:40px

Ausgabeschriftgröße:1rem (unter iPhone)

3 Wir alle wissen, dass das Pixelverhältnis von Geräten unterschiedlich ist. Daher verwenden wir hotcss, um den Pixelverhältnislink des Geräts anzupassen

Ich habe es in src/assets/js/ abgelegt. Sie können

die Methode entsprechend Ihren Gewohnheiten einführen, und Sie können einen beliebigen Namen selbst definieren, hier habe ich hotcss.js in viewport geändert .js

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erklärung zur Verwendung von React Router v4

Anleitung für den Einstieg in Vue Forms

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum automatischen Erstellen von rem für mobile Webpack-Terminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!