總的來說打包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中文網其他相關文章!