资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么用webpack打包layui

这篇文章运用简单易懂的例子给大家介绍怎么用webpack打包layui,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联-专业网站定制、快速模板网站建设、高性价比托里网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式托里网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖托里地区。费用合理售后完善,十年实体公司更值得信赖。

webpack它是代码编译工具,有入口,出口、loader和插件。其天生就代码分割、模块化,webpack2.0中加入tree shaking,用来提取公共代码,去掉死亡代码。

layui是面向于后端开发者的模块,在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。

用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'
}

关于用webpack打包layui的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网页题目:怎么用webpack打包layui
文章分享:http://www.cdkjz.cn/article/jocseh.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220