webpack 모바일 단말기용 rem을 자동으로 빌드하는 단계에 대한 자세한 설명

이번에는 webpack 모바일 단말기용 rem 자동 빌드 단계에 대해 자세히 설명하겠습니다. webpack 모바일 단말기용 rem 자동 빌드 시 주의사항은 무엇인가요?

프론트엔드 트렌드에 맞게 모바일 프로젝트를 자동으로 렘으로 변환하려는 친구들이 많은 것 같아요. 직접 손글씨를 쓰거나 editor플러그인을 사용하여 변경하면 매우 불편하고요. 오류가 발생하기 쉽습니다. 다음과 같은 문제를 찾기 위해 여러 가지 방법을 사용했습니다.

1 이전 비디오 튜토리얼을 따라가보니 node npm webpack px2rem의 다양한 플러그인 버전이 달라서 쓸모가 없습니다

2 온라인 튜토리얼이 부족하고 불완전합니다. 그것을 알아내는 데 오랜 시간이 걸렸습니다. vscode의 cssrem을 수동으로 설정하려고 생각했지만 여전히 확신이 없어서 마침내 모든 것을 정리했습니다. 모든 사람의 모바일 터미널 구축을 자동화하기 위해 다음 방법이 도움이 됩니다.

1 vue-cli 설치에 대해 많이 말하지 않겠습니다. 모두가 알아야 합니다.

2 px2rem-loader 설치 및 구성(postcss는 사용되지 않습니다. 여기서는 많은 문제를 시도했지만 이것을 사용하기로 결정했습니다.)

첫 번째 단계: npm install px2rem-loader

Part 2: webpack.base.conf.js 아래에 객체를 추가하고 여기서는 다른 객체를 사용하여 변경합니다. 다음 규칙에 따라 모든 사람이 이해할 수 있다고 믿습니다.

module.exports={
module: {
  rules: [
   {
    test: /\.(css|less|scss)(\?.*)?$/,
    loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
   }
  ]
 }
}

세 번째 단계: webpack.dev.conf.js 아래의 플러그인에 무언가를 추가합니다. Apple 5의 경우 remUnit 속성에 주의해야 합니다. .여기서는 40으로 설정했는데 80으로 설정한 사람도 있습니다. 여기서 40으로 설정한 이유는 hotcss와 함께 사용할 때 네 번째 부분에 대해 이야기하겠습니다

 plugins: [
  new webpack.LoaderOptionsPlugin({
   // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
   vue: {
    postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
   }
  }
 ]

: 많은 분들이 모르시는 부분입니다. 많은 사람들이 이 단계를 놓칩니다. utils.js에서 const cssLoader를 찾아 ?importLoaders=1

 const cssLoader = {
  loader: 'css-loader?importLoaders=1',
  options: {
   minimize: process.env.NODE_ENV === 'production',
   sourceMap: options.sourceMap
  }
 }

설치가 여기서 끝납니다. 완료되었습니다

Inputfont-size:40px

출력 글꼴 크기:1rem under iPhone)

3 우리 모두는 기기의 픽셀 비율이 다르다는 것을 알고 있으므로 hotcss를 사용하여 기기의 픽셀 비율을 조정합니다. 링크

src/assets/js/에 넣어서 소개하면 됩니다. 습관에 따라 이름을 직접 정의할 수 있습니다. 여기서는 hotcss.js를

.js

module.exports = {
 entry: {
  app: './src/main.js',
  rem: './src/assets/js/viewport.js'
 }
}

추천 도서:

위 내용은 webpack 모바일 단말기용 rem을 자동으로 빌드하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!