platformOS 문서 웹 사이트 패키지 설정

Webpack은 강력한 도구입니다.당시에는 배우고 사용하기 어렵다는 명성이 있었다.현재, 우수한 문서, 합리적인 기본 설정, 플러그인, 마운트 프로그램이 있습니다. 이 모든 것들은 좋은 효과를 얻는 동시에 설정을 소형화하는 데 도움을 줄 수 있습니다.

2020년의 주요 특징

우리 프로젝트에서 웹팩의 가장 중요한 기능은 다음과 같다.

흔들나무

코드 분할

동적 비동기 로드 코드 블록

이 글은 지난 몇 년 동안 우리가 어떻게 문서에서 웹 패키지를 사용하여 개발과 성능 생산 구축을 간소화했는지 설명한다.
최종 패키지 구성은 다음과 같습니다.

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WebpackRequireFrom = require('webpack-require-from');
const webpack = require('webpack');

const production = process.env.NODE_ENV === 'production';

module.exports = {
  entry: {
    'app': './src/app',
    'graphql': './modules/graphql/public/assets/graphql',
  },
  output: {
    chunkFilename: '[name].[chunkhash:3].js',
    publicPath: '',
    path: path.resolve('app/assets'),
  },
  module: {
    rules: [
      {
        test: /(\.css)$/,
        use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false } }, 'postcss-loader'],
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          exclude: /node_modules/,
          plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/transform-object-assign'],
          cacheDirectory: true,
          presets: [
            [
              '@babel/preset-env'
            ]
          ]
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].[chunkhash:3].css',
    }),
    new WebpackRequireFrom({
      variableName: 'window.__CONTEXT__.cdnUrl',
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ],
  mode: production ? 'production' : 'development',
}

정적 자산에 대한 설명

우리는 웹 패키지를 사용하여 정적 자산을 처리하지 않습니다.글꼴, 이미지는 플랫폼OS 자산 디렉터리 app/assets에서 적당한 위치에서 최적화되었습니다.우리가 이렇게 하는 데는 몇 가지 이유가 있다.

수동 최적화는 보통 자동 최적화보다 우수

간편한 구성

중단 의존도 감소

구축 시간 단축

CPU 시간(= 비용)을 낭비하지 않고 CI에서 각 빌드

에 대해 동일한 작업을 수행합니다.

테크니컬

PostCSS는 CSS 분석 플러그인을 만드는 데 사용되는 프레임워크입니다.SASS 에서 마이그레이션하여 복잡성을 줄일 수 있습니다.그것은 일부 남겨진 브라우저 복구를 처리한다.PostCSS 플러그인TailwindCSS의 기본이기도 합니다.
TailwindCSS는 CSS 프레임워크로 유지보수 가능한 보기를 만드는 데 매우 쉽고 최소한의 CSS 공간을 차지하기만 하면 된다.
TailwindCSS와 PostSS를 설정하는 방법에 관심이 있으면 our documentation GitHub repository를 방문하십시오.

기본 구성

상자를 열면 바로 사용할 웹 패키지는 완전히 설정되지 않은 상태에서 작업을 할 수 있습니다.  Read more on prototyping with no config . 기본적으로 index.js 디렉터리에서 src/ 파일을 찾아서 dist/main.js 로 출력합니다.우리는 몇 가지 기능을 사용해야 하기 때문에 설정 파일이 필요하다.우리가 사용하는 웹 페이지 설정은 매우 간단하다.

입구점

entry: {
  'app': './src/app',
  'graphql': './modules/graphql/public/assets/graphql',
},

우리는 두 개의 입구점 (HTML에서 추출할 파일) 을 사용합니다. 왜냐하면 우리의 문서 페이지에는 완전히 독립된 CSS 파일이 있고 GraphQL 단점에는 자동으로 생성된 문서가 있기 때문입니다.key는 출력을 정의하는 이름이고 value는 입구점으로 간주되는 파일의 상대적인 경로를 가리킨다.예를 들어 app.js는 입구점src/app.js에서 생성됩니다.

출력

기본적으로 출력 파일 이름은 [name].js 이고, 이것은 우리의 상황에 적용되기 때문에, 우리는 출력 파일 이름을 정의하지 않습니다.그러나 chunkFilename에 대해 캐시 실효를 실현하기 위해chunkhash를 추가해야 합니다.publicPath는 비어 있습니다. 웹 패키지에 내장된publicPath를 사용할 수 없기 때문입니다. WebpackRequireFrom 중 하나를 사용할 것입니다. 잠시 후에 설명하겠습니다.
path는 출력 파일을 배치하는 절대 경로입니다.platformOS의 경우 app/assets입니다.

output: {
    chunkFilename: '[name].[chunkhash:3].js',
    publicPath: '',
    path: path.resolve('app/assets'),
  },

플러그 인

MiniCssExtractPlugin CSS를 외부 파일로 추출합니다.만약 그것이 없다면 웹 패키지는 모든 내용을 하나의 JS와 하나의 CSS로 포장할 것입니다.

new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[name].[chunkhash:3].css',
})

platformOS Liquid Filter는 CDN에 놓인 자산을 가져오는 URL을 위해 쿼리 매개 변수를 추가하여 캐시를 파괴하기 때문에 우리가 Liquid에 필요한 주요 파일은 서로 다른 구축에서 다를 필요가 없습니다.파일 이름에 블록을 추가합니다 chunkhash:3. 이 블록들은 웹 패키지에서 동적으로 불러온 것이기 때문에 검색 파라미터가 처리되지 않습니다.
왜 이러지?브라우저가 캐시에서 파일을 불러오는 것을 방지합니다. (낡은 자원은 일부 내용을 파괴할 수 있습니다.) 만약 파일이 변경될 경우.
네이티브 platformOSasset_url 필터를 사용하여 로드된 파일:

파일 이름에 chunkhash 블록이 로드되었습니다.

WebpackRequireFrom 실행 시 CDN URL을 동적 블록에 설정하므로 콘텐츠를 하드코딩할 필요가 없습니다.HTML 원본에서 이 URL을 추출했을 뿐입니다. 이 URL은 서버에 표시됩니다.

new WebpackRequireFrom({
    variableName: 'window.__CONTEXT__.cdnUrl',
}),

이 옵션은 웹 패키지가 프로그램이 실행될 때 브라우저에서 CDN URL을 찾을 위치를 알려 줍니다.Liquid에서, 우리는 CDN URL에 정의window.__CONTEXT__.cdnUrl를 해서 웹 패키지가 동적 불러오는 블록을 어디서 찾을 수 있는지 알 수 있도록 합니다.

<script>
  window.__CONTEXT__ = { cdnUrl: "{{ '' | asset_url }}" };
</script>

이것은 플랫폼이 제공하는 모든 환경에서 블록: 개발, 임시 저장과 생산을 정확하게 불러올 것이다.
webpack.DefinePlugin 저희가 구축 모델(생산 또는 개발)을 운행할 때 전달할 수 있도록 합니다.이것은 우리가 검색엔진으로 사용하는 Algolia 검색 스크립트에 필요한 것이다.

new webpack.DefinePlugin({
 'process.env': {
     NODE_ENV: JSON.stringify(process.env.NODE_ENV),
  },
}),

이 줄이 정상적으로 작동하도록 npm 스크립트에 정의된 NODE ENV를 사용하여 웹팩 cli를 실행합니다.

"build": "NODE_ENV=production npx webpack-cli --no-color",

적재기

Loader는 웹 패키지의 특정 플러그인으로 웹 패키지 기능을 확장하여 기본적으로 이해할 수 없는 파일을 조작할 수 있습니다.기본적으로 웹팩은 JavaScript만 확인 및 바인딩할 수 있습니다.
적재기의 순서가 매우 중요하다.예를 들어 css 마운트는 POSTSS가 작성한 문법으로 해석할 수 없기 때문에 먼저 POSTSS를 실행해야 합니다.로드 프로그램은 오른쪽에서 왼쪽으로 실행됩니다.
postcss loader는 웹 패키지에서postcss 플러그인 생태계를 사용할 수 있도록 합니다.그것은 보통 우편 번호가 필요하다.배치하다.js 파일에 PostCSS 플러그인을 추가합니다. PostCSS 자체에 아무런 기능이 없기 때문입니다.

{
    test: /(\.css)$/,
    use: [
            MiniCssExtractPlugin.loader,
            { loader: 'css-loader', options: { url: false } },
            'postcss-loader'
        ],
},

CSS 파일에 대해 PostCSS는 먼저 작업을 완성하고 출력을 CSS 로더에 전달합니다. 출력은 CSS의 URL을 해석하지 않고 MiniCssExtractPlugin에 전달됩니다.CSS를 별도의 파일에 저장하는 프로그램을 로드합니다.
babel-loader babel과 플러그인을 사용하여 JavaScript를 전송합니다.package.json에 정의된 브라우저에 대해서는 preset-env와 두 개의 플러그인을 사용합니다: syntax-dynamic-import과 transform-object-assign.

코드 버스트 및 조건 로드

만약 웹 패키지를 구축할 때 코드를 분리해서 브라우저에서 실행할 때 블록을 비동기적으로 불러오는 방법을 포함하지 않는다면, 본고는 완전하지 않습니다.

import './app.css';

import { $q } from './js/helpers/dom';

import './js/sidebarMenu';
import './js/deepLinks';
import './js/autosteps'; // this HAS to be after deepLinks
import './js/toc';
import './js/externalLinks';
import './js/feedback';

import(/* webpackChunkName: "search" */ './js/search');

if ($q('code[class*="language-"]')) {
  import(/* webpackChunkName: "syntaxHighlighting" */ './js/syntaxHighlighting');
}

모든 ES6 가져오기sidebarMenu에서 feedback까지 app에 직접 묶습니다.js.

동적 가져오기 (import-search라는 함수) 는 비동기적으로 불러오는 블록을 생성합니다.

조건의 계산 결과가 if값일 때만 if 문장에 포장된 동적 가져오기가 비동기적으로 불러옵니다.우리의 예에서 어떤 선택기가 웹 페이지에 나타날 때Webpack은 이러한 모듈을 필요하지 않은 페이지에 로드하지 않습니다.

홈 페이지에 대한 요청 예:

구문을 강조 표시해야 하는 페이지 요청의 예:

결어

2020년 웹백은 2015년 웹백과 완전히 다르지만, 여전히 무섭다.만약 그 문법을 느끼지 못한다면, 다른 코드 귀속기를 시도할 수 있다.그중 일부는 어떤 사람에게는 더 간단하다(rollup). 다른 일부는 더 빠르다(esbuild.우리는 아주 오래 전에 웹 패키지를 선택했다. 왜냐하면 그것은 신뢰할 수 있고, 기능이 가장 풍부하며, 기능이 강하고, 좋은 문서 기록이 있기 때문이다.
만약 당신이 흥미가 있다면, 우리는 WindCelAws로 당신을 위해 정적 웹 페이지를 만들거나, WindCelAws로 당신을 위해 정적 웹 페이지를 만들 수 있습니다.