首頁  >  文章  >  web前端  >  webpack打包layui實作步驟

webpack打包layui實作步驟

尚
轉載
2019-11-23 17:12:187112瀏覽

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中文網其他相關文章!

陳述:
本文轉載於:layui.com。如有侵權,請聯絡admin@php.cn刪除