Detaillierte Erläuterung der automatisierten Konstruktions-Rem-Methode des mobilen Terminals von Webpack

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die automatische Erstellung von REM auf dem mobilen Terminal von Webpack im Detail erklären Ein praktischer Fall, werfen wir einen Blick darauf.

1 Als ich dem alten Video-Tutorial folgte, stellte ich fest, dass die verschiedenen Plug-In-Versionen von Node NPM Webpack Px2rem unterschiedlich und nutzlos sind

2. Die Tutorials im Internet fehlten und waren unvollständig. Ich habe lange darüber nachgedacht, das CSSREM von vscode manuell einzustellen, aber ich war immer noch nicht überzeugt und habe es schließlich herausgefunden. Die folgende Methode wird bereitgestellt. Ich hoffe, dass sie für alle hilfreich ist, um automatisch REM für mobile Endgeräte zu erstellen

1 Ich werde nicht näher auf die Installation von vue-cli eingehen, das sollte jeder wissen

2 Installieren und konfigurieren Sie px2rem-loader (postcss wird hier nicht verwendet. Nachdem ich viele Probleme ausprobiert hatte, entschied ich mich, dies zu verwenden)

Der erste Schritt: npm install px2rem-loader

Teil 2: Fügen Sie das

-Objekt unter webpack.base.conf.js hinzu. Hier verwende ich andere und ändere es 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 etwas zu den Plugins unter webpack.dev.conf.js hinzu. Jeder muss auf das remUnit-Attribut achten, das im Fall von Apple 5 40 Pixel beträgt. Ich habe es hier auf 40 festgelegt, und einige Leute haben es auf 80 festgelegt . Hier habe ich 40. Es ist für die Verwendung mit hotcss, worüber ich weiter unten sprechen werde

 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 einfach den const cssLoader unter utils.js und fügen ?importLoaders=1

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

hinzu Die Installation ist nun abgeschlossen

Geben Sie

Schriftgröße:40px

ein Ausgabeschriftgröße: 1rem (unter iPhone)

3 Wir alle wissen, dass das Pixelverhältnis von Geräten unterschiedlich ist, daher verwenden wir HotCSS, um das Pixelverhältnis des Geräts anzupassen. Link

Ich habe es in src/assets/js/ eingefügt, Sie können Ihren Gewohnheiten folgen

Um eine Methode einzuführen, können Sie selbst einen beliebigen Namen definieren. Hier habe ich hotcss.js in

viewport.js

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

geändert Das ist es!

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:

So verwenden Sie die Iterator-Schnittstelle von PHP Iterator

php dekomprimiert den Inhalt des Zip-Pakets in das angegebenes Verzeichnis Detaillierte Erläuterung der Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der automatisierten Konstruktions-Rem-Methode des mobilen Terminals von Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!