【WEB前端开辟】webpack打包layui完成步骤

总的来说打包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网别的相干文章！