webpack打包layui实现步骤

来源：动视网责编：小采时间：2020-11-27 14:05:43

webpack打包layui实现步骤

webpack打包layui实现步骤:总的来说打包webpack打包layui要解决几个问题：1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题，基本就能成功打包了首先安装layui（推荐：layui教程）npm i layui-src截至到我安装时的版本

推荐度：

点击下载本文 文档为doc格式

导读webpack打包layui实现步骤:总的来说打包webpack打包layui要解决几个问题：1、解决引入layui-src报错的问题2、layui插件的打包方式3、解决打包后样式不生效的问题解决上面几个问题，基本就能成功打包了首先安装layui（推荐：layui教程）npm i layui-src截至到我安装时的版本

总的来说打包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实现步骤

推荐度：

点击下载本文 文档为doc格式

标签：流程步骤 web

热门焦点

webpack打包layui实现步骤

webpack打包layui实现步骤

webpack打包layui实现步骤

最新推荐

猜你喜欢

热门推荐