Webpack packaging layui implementation steps

In general, there are several problems to be solved when packaging webpack and layui:

1. Solve the problem of error reporting when introducing layui-src

2. Packaging method of layui plug-in

3. Solve the problem that the style does not take effect after packaging

Solve the above problems and basically package successfully

First install layui (recommended ：layui tutorial）

npm i layui-src

As of the time of my installation, the version was 2.3.0

Some problems with the package itself are still unresolved, and corrections need to be received here

Go to the installation directory (/node_modules/layui-src/package.json) and modify the main field of package.json to "main": "dist/layui.js",

is equivalent to giving The current package specifies the entry file, which solves the problem 1 mentioned before.

Next question 2:

is also the most critical point. Should we statically package the plug-in or use layui's own on-demand loading?

I In the end, we adopted ayui’s original on-demand loading method for no other reason than to save trouble!

Because I only need to worry about introducing layui, the plug-in does not need to be managed by me, and it can also reduce the size of the packaged file. Of course, the biggest reason is that I am lazy

After deciding what to do You can introduce layui

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

The following layui.config is the global configuration. The dir directory tells layui the location of its plug-ins. This directory is the location of the entry file layui.js.
This is needed If you understand it clearly, if you configure it incorrectly, you will see a 404 error when the browser loads plug-ins such as layer.js

Question 3, the introduction of css

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

Here is What took me the longest time is, look, what I introduced here is layui.css in the src directory, not the previous dist directory. The reason is that I made some modifications and customizations.

Search for url keywords and change the file For example, remove the quotation marks in url("../font/iconfont.eot?v=230") and change it to url(../font/iconfont.eot?v=230), and then cooperate with the url-loader# in webpack.

##Make the font file static, and you can customize other styles if necessary

Here is the problem that many people encounter when the style does not take effect. In fact, it is very simple. It is a webpack configuration problem.

css-loader will hash the css custom style name by default to prevent duplicate names, so the packaged style names have changed... I found this problem after searching for a long time and opening debugging

There are two solutions. One is to use css in js, and the final rendering will be hashed synchronously (I guess, lazy verification...). The second is to prevent webpack from changing the name and keep the original style name.

Decisively adopt the second option, too lazy to bother, the configuration is as follows

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

In addition, you need to pay attention to the publicPath in css-loader and file-loader. It will be clearer if you open the debugging page here. 404, just program for errors

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'
}

The above is the detailed content of Webpack packaging layui implementation steps. For more information, please follow other related articles on the PHP Chinese website!