總的來(lái)說(shuō)打包webpack打包layui要解決幾個(gè)問(wèn)題：

1、解決引入layui-src報(bào)錯(cuò)的問(wèn)題

2、layui插件的打包方式

3、解決打包后樣式不生效的問(wèn)題

解決上面幾個(gè)問(wèn)題，基本就能成功打包了

首先安裝layui（推薦：layui教程）

npm i layui-src

截至到我安裝時(shí)的版本是 2.3.0

包本身的一些問(wèn)題仍沒(méi)有解決，這里需要收到更正

到安裝目錄下（/node_modules/layui-src/package.json），修改package.json的main字段為"main": "dist/layui.js",

相當(dāng)于給當(dāng)前包指定入口文件，這個(gè)解決了之前說(shuō)的問(wèn)題1。

接下來(lái)問(wèn)題2：

也是比較最關(guān)鍵的地方，是靜態(tài)打包插件還是沿用layui自身的按需加載呢

我最終采取的是沿用ayui原有的按需加載的方式，理由無(wú)它，省事！

因?yàn)檫@樣我僅需要關(guān)心引入layui即可，插件無(wú)需我管理，而且還能減小打包后的文件大小，當(dāng)然最大的原因還是我懶

決定怎么做之后就可以引入layui了

import 'layui-src' layui.config({   dir: '/dist/' })

后面的layui.config是全局配置，dir目錄之告訴layui它的插件的位置，這個(gè)目錄是入口文件layui.js的所在位置，
這點(diǎn)需要自己理解清楚，配置錯(cuò)誤就會(huì)看到瀏覽器加載諸如layer.js等插件時(shí)的404錯(cuò)誤

問(wèn)題3，css的引入

import 'layui-src/src/css/layui.css'

這里是耗費(fèi)我時(shí)間最久的地方，看，我這里引入的是src目錄下的layui.css不是之前的dist目錄，原因是我做了一些修改和定制

搜索url關(guān)鍵字，將文件里的諸如url(”../font/iconfont.eot?v=230“)去掉引號(hào)，改成url(../font/iconfont.eot?v=230)，后續(xù)配合webpack里的url-loader

將字體文件靜態(tài)化，其他的樣式有需要的也可自己定制

這里說(shuō)下很多人都遇到的樣式不生效問(wèn)題，其實(shí)很簡(jiǎn)單，是webpack的配置問(wèn)題

css-loader默認(rèn)會(huì)把css自定義樣式名哈?；?，防止重名，因此打包后的樣式名字都變了……找了半天打開調(diào)試才發(fā)現(xiàn)這個(gè)問(wèn)題

解決方案有兩種，一種是在js里使用css，最后渲染會(huì)同步哈希化（我猜的，懶的驗(yàn)證……），第二，不讓webpack改名字，保持原有的樣式名

果斷采取第二種，懶得折騰了，配置如下

{     loader: 'css-loader',     options: {         modules: true,         getLocalIdent: (context, localIdentName, localName, options) = >{             return localName         }     } },

另外需注意css-loader和file-loader里的publicPath，這里打開調(diào)試頁(yè)面看下會(huì)比較清楚，如果404了，就面向錯(cuò)誤編程

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: '', // 默認(rèn)是dist目錄               publicPath: '../font/', // 圖片的url前面追加'../font'               useRelativePath: true, // 使用相對(duì)路徑               limit: 50000 // 表示小于1K的圖片會(huì)被轉(zhuǎn)化成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' }