Schritte zur Implementierung des Webpack-Packaging-Lauis

Im Allgemeinen müssen beim Verpacken von Webpack und Laui mehrere Probleme gelöst werden:

1. Lösen Sie das Problem der Fehlerberichterstattung bei der Einführung von Laui-src

2. Verpackungsmethode des Laui-Plug-Ins

3. Lösen Sie das Problem, dass der Stil nach dem Packen nicht wirksam wird

Lösen Sie die oben genannten Probleme und Sie können es grundsätzlich erfolgreich verpacken

Layui zuerst installieren (empfohlen:Layui-Tutorial)

npm i layui-src

Die Version zum Zeitpunkt der Installation ist 2.3.0

Einige Probleme mit dem Paket selbst sind immer noch ungelöst und Korrekturen müssen hier eingehen

Gehen Sie in das Installationsverzeichnis (/node_modules/layui-src/package.json) und ändern Sie das Hauptfeld von package.json in „main“: „ dist/layui.js“,

entspricht dem aktuellen Paket, das die Eintragsdatei angibt, die das zuvor erwähnte Problem 1 löst.

Nächste Frage 2:

Dies ist auch der kritischste Punkt. Soll ich das Plug-in statisch verpacken oder Lauis eigenes On-Demand-Laden verwenden?

Ich Am Ende haben wir Ayuis ursprüngliche On-Demand-Lademethode aus keinem anderen Grund übernommen, als um Ärger zu sparen!

Da ich mich auf diese Weise nur um die Einführung von Laui kümmern muss, muss das Plug-In nicht von mir verwaltet werden und es kann natürlich auch die Größe der gepackten Datei reduzieren ist, dass ich faul bin

Nachdem Sie entschieden haben, was zu tun ist, können Sie Laui einführen

import 'layui-src'
layui.config({
  dir: '/dist/'
})

Die dahinter liegende Datei „layui.config“ teilt Layui den Speicherort seiner Plug-Ins mit. In diesem Verzeichnis befindet sich die Eintragsdatei „layui.js“

Dies ist erforderlich. Wenn Sie es genau verstehen, wird bei einer falschen Konfiguration ein 404-Fehler angezeigt, wenn der Browser Plug-Ins wie „layer.js“ lädt 🎜>

Frage 3, die Einführung von CSS

import 'layui-src/src/css/layui.css'

Hier ist, was am längsten gedauert hat. Sehen Sie, was ich hier eingeführt habe, ist „layui.css“ im src-Verzeichnis, nicht Der Grund dafür ist, dass ich einige Änderungen und Anpassungen vorgenommen habe.

Suchen Sie nach URL-Schlüsselwörtern und kopieren Sie die Datei. Entfernen Sie beispielsweise die Anführungszeichen in url("../font/iconfont.eot?v =230") und ändern Sie es in url(../font/iconfont.eot?v=230) und arbeiten Sie dann mit dem URL-Loader im Webpack zusammen

Machen Sie die Schriftartdatei statisch, und Sie können sie anpassen Andere Stile, falls erforderlich

Hier werden wir über das Problem sprechen, auf das viele Menschen stoßen, nämlich dass der Stil nicht wirksam wird. Es handelt sich tatsächlich um ein Webpack-Konfigurationsproblem Der CSS-Loader hasht standardmäßig den Namen des benutzerdefinierten CSS-Stils, um eine Duplizierung von Namen zu verhindern. Daher haben sich die Namen der gepackten Stile geändert ... Ich habe dieses Problem gefunden, nachdem ich lange gesucht und das Debugging geöffnet hatte

Es gibt zwei Lösungen. Eine besteht darin, CSS in js zu verwenden und das endgültige Rendering synchron zu machen (ich schätze, verzögerte Überprüfung ...). Die zweite besteht darin, zu verhindern, dass Webpack den Namen ändert und den ursprünglichen Stilnamen beibehält 🎜> Übernehmen Sie entschieden die zweite Option, zu faul, sich die Mühe zu machen, die Konfiguration ist wie folgt

{
    loader: 'css-loader',
    options: {
        modules: true,
        getLocalIdent: (context, localIdentName, localName, options) = >{
            return localName
        }
    }
},

Außerdem müssen Sie auf den publicPath im CSS-Loader und File-Loader achten. Es wird klarer sein, wenn Sie öffnen hier die Debugging-Seite, programmieren Sie einfach auf Fehler

const webpack = require('webpack')

module.exports = {
  entry: {
    home: './static/js/home.js',
    download: './static/js/download.js',
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',// 打包后的文件名称
              outputPath: '', // 默认是dist目录
              publicPath: '../font/', // 图片的url前面追加'../font'
              useRelativePath: true, // 使用相对路径
              limit: 50000 // 表示小于1K的图片会被转化成base64格式
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash:3]_[name].[ext]',// 打包后的文件名称
              outputPath: '',
              publicPath: '../img/',
              useRelativePath: true
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              getLocalIdent: (context, localIdentName, localName, options) => {
                return localName
              }
            }
          },
        ]
      },
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      "window.jQuery": "jquery"
    })
  ],
  mode: 'development'
}

Das obige ist der detaillierte Inhalt vonSchritte zur Implementierung des Webpack-Packaging-Lauis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!