总的来说打包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完成步骤的细致内容,更多请关注ki4网别的相干文章!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)