Webpack 패키징 Laui 구현 단계

일반적으로 webpack 및layui를 패키징할 때 해결해야 할 몇 가지 문제가 있습니다.

1 도입 시 오류 보고 문제를 해결합니다. layui-src#🎜 🎜#

2.layui 플러그인 패키징 방법

3. 패키징 후 스타일이 적용되지 않는 문제 해결

#🎜🎜 #위 문제를 해결하고 기본적으로 패키지를 성공적으로 완료하세요

layui를 먼저 설치하세요(권장:

layui tutorial

)

npm i layui-src

당시 버전 내 설치는 2.3.0이었습니다

패키지 자체의 일부 문제는 아직 해결되지 않았으며 수정 사항은 여기에서 받아야 합니다

설치 디렉터리로 이동(/node_modules/layui- src/package.json) 및 package.json의 기본 필드를 수정합니다. "main": "dist/layui.js"의 경우

은 현재 패키지에 대한 항목 파일을 지정하는 것과 동일합니다. 앞서 언급한 문제 1.

다음 질문 2:

역시 플러그인을 정적으로 패키징할지, 아니면 Layui의 자체 온디맨드 패키지를 사용할지 여부를 결정하는 가장 중요한 포인트입니다. loading# 🎜🎜#

제가 최종적으로 채택한 것은 수고를 덜기 위해 ayui의 독창적인 주문형 로딩 방법을 따르는 것이었습니다!

이렇게 하면 Layui 도입만 걱정하면 되기 때문에 플러그인을 직접 관리할 필요도 없고, 패키지 파일의 크기도 줄일 수 있습니다. 가장 큰 이유는 제가 게으르다는 것입니다

무엇을 할지 결정한 후layui를 소개하면 됩니다

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

다음layui.config는 dir 디렉토리가layui에게 해당 플러그인의 위치입니다. 이 디렉토리는layui.js 항목 파일의 위치입니다.

이를 명확하게 이해해야 합니다. 잘못 구성하면 브라우저가 플러그인을 로드할 때 404 오류가 표시됩니다. 예를 들어 layer.js

질문 3, CSS 소개#🎜 🎜#

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

여기가 제가 가장 오랜 시간을 보낸 곳입니다. 여기에 소개된 것은 이전 dist 디렉터리가 아닌 src 디렉터리에 있습니다. 그 이유는 일부 수정 및 사용자 정의를 했기 때문입니다. 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 패키징 Laui 구현 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!