webpack打包layui實作步驟

總的來說打包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欄位為"main": "dist/layui.js",

#相當於給目前包指定入口文件，這個解決了之前說的問題1。

接下來問題2：

也是比較最關鍵的地方，是靜態打包插件還是沿用layui自身的按需載入呢

#我最終採取的是沿用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自訂樣式名哈希化，防止重名，所以打包後的樣式名字都變了…找了半天打開調試才發現這個問題

解決方案有兩種，一種是在js裡使用css，最後渲染會同步哈希化（我猜的，懶的驗證…），第二，不讓webpack改名字，保持原有的樣式名

果斷採取第二種，懶得折騰了，配置如下

{
    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打包layui實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！