怎么用webpack打包layui

這篇文章運用簡單易懂的例子給大家介紹怎么用webpack打包layui，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。