Webpack パッケージングの Laui 実装手順

一般に、webpack とlayui をパッケージ化するときに解決すべき問題がいくつかあります:

1.layui-src

を導入する際のエラー報告の問題を解決します。

2.layuiプラグインのパッケージ化方法

3.パッケージ化後にスタイルが反映されない問題を解決

#上記の問題を解決し、基本的にはパッケージ化成功

まず、layui をインストールします (推奨:

layui チュートリアル)

npm i layui-src

私のインストール時のバージョンは 2.3.0です

パッケージ自体にいくつかの問題がありますこれらはまだ未解決であり、ここで修正を受け取る必要があります

インストール ディレクトリ (/node_modules/layui-src/package.json) に移動し、package.json のメイン フィールドを "main": "dist" に変更します。 /layui.js",

は、現在のパッケージにエントリ ファイルを指定することと同じです。これにより、前述の問題 1 が解決されます。

次の質問 2:

も最も重要な点です。プラグインを静的にパッケージ化すべきか、それとも Lauiui 独自のオンデマンド読み込みを使用すべきでしょうか?

I 結局、手間を省くため、ayui 独自のオンデマンド読み込み方式を採用しました。

layuiの導入だけを考えれば良いので、プラグインを自分で管理する必要がなく、パッケージ化したファイルのサイズも小さくすることができます。怠け者です

何をするかを決めたらlayuiを導入できます

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

次のlayui.configはグローバル設定です。dirディレクトリはlayuiにプラグインの場所を伝えます。このディレクトリは次のとおりです。エントリ ファイルlayui.jsの場所

これが必要です これを明確に理解し、設定を誤ると、ブラウザがlayer.jsなどのプラグインを読み込むときに404エラーが表示されます

質問 3、css の導入#

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

こちらが一番時間がかかったのは、ほら、ここで紹介したのは、以前のものではなく、src ディレクトリにあるlayui.css です。 dist ディレクトリ。その理由は、いくつかの変更とカスタマイズを行ったためです。

URL キーワードを検索し、ファイルを変更します。たとえば、url("../font/iconfont.eot?v= 内の引用符を削除します) 230") を url(../font/iconfont.eot?v=230) に変更し、webpack の url-loader# と連携します。

##フォント ファイルを静的にすると、カスタマイズできます。必要に応じて他のスタイルも必要です。

これは、スタイルが有効にならないときに多くの人が遭遇する問題です。実際、それは非常に単純です。これは Webpack の設定の問題です。

css-loader名前の重複を防ぐためにデフォルトで CSS カスタム スタイル名をハッシュするため、パッケージ化されたスタイル名が変更されました...長時間検索してデバッグを開いた後にこの問題を発見しました

解決策は 2 つあります。 js で CSS を使用し、最終的なレンダリングは同期的にハッシュされます (遅延検証だと思います...) 2 つ目は、Webpack による名前の変更を防ぎ、元のスタイル名を維持することです。 2 番目のオプションは面倒なので、設定は次のとおりです

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

さらに、css-loader と file-loader の publicPath に注意する必要があります。デバッグを開いてみると、より明確になります。 404、エラー用のプログラムです

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

以上がWebpack パッケージングの Laui 実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。