webpack打包LayUI实现
总的来说打包webpack打包layui要解决几个问题:
1、解决引入layui-src报错的问题
2、layui插件的打包方式
3、解决打包后样式不生效的问题
解决上面几个问题,基本就能成功打包了
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'
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhjga
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13