Étapes de mise en œuvre de layui d'emballage Webpack

En général, l'empaquetage du webpack et l'empaquetage de layui doivent résoudre plusieurs problèmes :

1. Résoudre le problème du rapport d'erreurs lors de l'introduction de layui-src

2. Méthode d'emballage du plug-in layui

3. Résolvez le problème selon lequel le style ne prend pas effet après l'emballage

Résolvez les problèmes ci-dessus et vous pouvez essentiellement l'emballer avec succès

Première installation de layui (recommandé :

tutoriel layui)

npm i layui-src

La version au moment où je l'ai installé est 2.3.0

Quelques problèmes avec le package lui-même ne sont toujours pas résolus, et les corrections doivent être reçues ici

Allez dans le répertoire d'installation (/node_modules/layui-src/package.json) et modifiez le champ principal de package.json en "main": " dist/layui.js",

est équivalent à Le package actuel spécifie le fichier d'entrée, ce qui résout le problème 1 mentionné précédemment.

Question suivante 2 :

C'est aussi le point le plus critique. Dois-je empaqueter le plug-in de manière statique ou utiliser le propre chargement à la demande de layui

.

Moi En fin de compte, nous avons adopté la méthode originale de chargement à la demande d'ayui pour aucune autre raison que d'éviter des ennuis !

Parce que de cette façon, je n'ai qu'à me soucier de l'introduction de layui, le plug-in n'a pas besoin d'être géré par moi, et cela peut également réduire la taille du fichier empaqueté. Bien sûr, c'est la principale raison. c'est que je suis paresseux

Après avoir décidé quoi faire Vous pouvez introduire layui

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

Le layui.config derrière est la configuration globale Le répertoire dir indique à layui l'emplacement de ses plug-ins. Ce répertoire est l'emplacement du fichier d'entrée layui.js

Ceci est nécessaire Si vous le comprenez bien, si vous le configurez incorrectement, vous verrez une erreur 404 lorsque le navigateur chargera des plug-ins tels que layer.js <.>

Question 3, l'introduction du css

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

Voici ce qui m'a pris le plus de temps, écoutez, ce que j'ai introduit ici c'est layui.css dans le répertoire src, pas le répertoire dist précédent. La raison est que j'ai apporté quelques modifications et personnalisations

Recherchez les mots-clés de l'url et copiez le fichier. Par exemple, supprimez les guillemets dans url("../font/iconfont.eot?v =230") et remplacez-le par url(../font/iconfont.eot?v=230), puis coopérez avec le chargeur d'url dans webpack

Rendez le fichier de police statique et vous pourrez le personnaliser d'autres styles si nécessaire

Nous parlerons ici du problème que beaucoup de gens rencontrent et que le style ne prend pas effet. En fait, c'est très simple. C'est un problème de configuration du webpack. css-loader hachera le nom du style personnalisé CSS par défaut pour éviter la duplication des noms, donc les noms de style packagés ont changé... J'ai trouvé ce problème après avoir longtemps cherché et ouvert le débogage

Il y en a deux solutions. La première consiste à utiliser CSS dans js, et le rendu final sera haché de manière synchrone (je suppose, vérification paresseuse...). La seconde est d'empêcher webpack de changer le nom et de conserver le nom de style d'origine

<.> Adoptez résolument la deuxième option, trop paresseux pour s'en soucier, la configuration est la suivante

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

De plus, vous devez faire attention au publicPath dans css-loader et file-loader Ce sera plus clair si. vous ouvrez la page de débogage ici 404, programmez simplement les erreurs

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'
}

.

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!