집 > 기사 > 웹 프론트엔드 > webpack의 모바일 단말 자동화 빌드 렘 방식에 대한 자세한 설명

webpack의 모바일 단말 자동화 빌드 렘 방식에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-11 13:34:021955검색

이번에는 webpack의 모바일 단말기에서 rem을 자동으로 구축하는 방법에 대해 자세히 설명하겠습니다. webpack의 모바일 단말기에서 rem을 자동으로 구축할 때의 주의 사항은 무엇입니까? 봐.

1 이전 비디오 튜토리얼에 이어 node npm webpack px2rem의 다양한 플러그인 버전이 다르고 전혀 쓸모가 없다는 것을 발견했습니다

2. 인터넷의 튜토리얼이 부족하고 불완전했습니다. 알아내는 데 오랜 시간이 걸렸습니다. vscode의 CSS를 수동으로 설정하려고 했지만 여전히 확신이 없어서 결국 알아냈습니다. 다음과 같은 방법이 제안되었는데, 모바일 단말용 렘을 자동으로 빌드하는 것이 모든 사람에게 도움이 되기를 바랍니다

1 vue-cli 설치에 대해 자세히 설명하지 않겠습니다. 모두가 알아야 합니다

2 px2rem-loader 설치 및 구성 (여기서는 postcss를 사용하지 않습니다. 많은 고민 끝에 이것을 사용하기로 결정했습니다)

첫 번째 단계: npm 설치 px2rem-loader

2부: webpack.base.conf.js 아래에 objects를 추가합니다. 여기서는 sass를 사용합니다. 다른 사람이 사용하는 경우 다음 규칙을 따르세요.

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

3단계: webpack.dev.conf.js 아래 플러그인에 무언가를 추가합니다. 모두가 remUnit 속성에 주의해야 합니다. Apple 5의 경우 40px입니다. 여기서는 40으로 설정했고 어떤 사람들은 80으로 설정했습니다. . 여기에는 40개가 있습니다. 아래에서 설명할 hotcss와 함께 사용하기 위한 것입니다

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

4부: 많은 사람들이 이 단계를 놓치고 있습니다. utils.js에서 const cssLoader를 찾아 ?importLoaders=1

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

를 추가하세요. 여기까지 설치가 완료되었습니다

글꼴 크기:40px

를 입력하세요. 출력 글꼴 크기:1rem(iPhone 아래)

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

. src/assets/js/에 넣었으니 습관대로 따라하시면 됩니다

메소드를 소개하기 위해 이름을 직접 정의할 수 있습니다. 여기서는 hotcss.js를 viewport.js

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

로 변경했습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!