如何使用webpack打包layui?(实践)

总的来说打包webpack打包layui要解决几个问题:

1、解决引入layui-src报错的问题

2、layui插件的打包方式

3、解决打包后样式不生效的问题

解决上面几个问题,基本就能成功打包了

首先安装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'
}

本文转载自:https://fly.layui.com/jie/42655/


推荐文章
详解layui.layer独立组件

layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,laye

layui中的layer怎么进行宽高设置?

layui中的layer模块可以使用area设置宽高。类型:String/Array,默认:'auto'在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area:'500px',

layui同页面如何显示多种时间样式?

Layui时间模块同页面显示多种时间样式layui时间模块主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器等五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。代码如下:

layui之关于表格数据变更的一种处理方式

表格数据变更,一般包括几个内容:新增、修改、删除、移动,开发中经常会面临的一个问题就是变更之后如何将数据同步到节点上,一直以来个人的建议还是利用表格重载,不管是url模式的还是data模式的实际都是需

layui如何自定义字体图标?(图文介绍)

layui的图标取自于阿里巴巴的矢量图标库Iconfont第一步,通过浏览器打开http://iconfont.cn/,访问阿里巴巴矢量图标库。第二步,通过右上角的用户图标,授权登陆一个账号,在此我选

浅谈layui弹出层(open)的属性

layui.open属性如:打开一个弹出层核心方法varindex=layer.open({ type:2, title:title, maxmin:true, offset:'100px', are

浅谈layui数据表格的基础使用

表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstraptable、layuitable、ea

layui如何关闭弹出层?

layui可以使用closeAll关闭弹出层,如果不指向层类型的话,它会销毁掉当前页所有的layer层。我们可以使用下面的方法关闭指定层:layer.closeAll();//疯狂模式,关闭所有层la

layui如何实现表格反转?简单实现方式介绍

表格反转,或者叫行列转换,估计都不陌生,先看效果图:测试页面:https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled相对标

layui怎么监听多个radio事件?

需求如下图:想要选中单选框3,是单选框3下的复选框全选如果面板信息不多的话,可以给每个单选框3添加一个固定的监听事件但是实际项目中,不仅仅只有两个,会有几十个,这时总不能绑定一个lay-filter,

浅谈layui前端遇到的难点(集合)

一、表格中插入下拉框的情况问题:表格遇到下拉框表单的情况,下拉框在表格中没办法显示出来,效果:1、表格中下拉框被隐藏----方法1这种方法解决了表格中下拉框被隐藏的状态了,但是显示并不是很美观,距离最

layui是啥框架?

layui首个版本发布于2016年金秋,她区别于那些基于MVVM底层的UI框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面

浅谈layui表单中的inline和block

layui表单中的inline和block:block:block元素会独自占一行,多个block元素各自新起一行,默认情况下,block元素宽度自动填充其父元素宽度 单行输入框 验证必填项

怎么将layui引入开发框架中?

将layui导入开发框架的方法:1、下载框架包(http://www.layui.com/)2、将layui文件夹拷入项目位置3、页面中导入layui.all.jslayui.css和jquery即可

layui动态表格之合并单元格

需求:下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的:①第一步:再生成表格后调用此方法,以合并重复的单元格done:function(res,curr,count){ merge(

vue.js和layui一样么?

vue.jsVue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,方

浅谈layui上传文件和数据表格中的一些问题

layui是一款我比较喜欢的框架,它的界面风格和颜色搭配都是让人比较舒服的,所以我非常喜欢使用layui。接下来就是在工作中使用layui遇到了一些比较细节的问题:第一:layui上传文件的问题,第二

浅谈layui中table的sort排序

今天来谈谈tablesort的那点事。预告一下,目的是做到前台排序还有服务器排序区分开,目前的table的分页实际是比较“乱”的,相信很多用的有一段时间的特别是做server排序的同学都会多多少少遇到

layui input只读属性是什么?

layuiinput只读属性是什么?layuiinput只读属性是readonly。readonly属性规定输入字段为只读。只读字段是不能修改的。不过,用户仍然可以使用tab键切换到该字段,还可以选中

浅谈layui数据表格隐藏列的方法

在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。table.render({ elem:'#test' ,url:'${pag