홈페이지>ASP 소스 코드>기타 카테고리
다운로드

참고: 이 프로젝트는 더 이상 적극적으로 유지 관리되지 않습니다.

불행하게도 지금 당장은 이 프로젝트를 유지할 시간이나 열정이 없습니다. 이 프로젝트를 포크하거나 해당 소스를 읽어서 프로젝트가 어떻게 구축되었는지 알아보는 것이 좋습니다.

트리스-웹팩-보일러플레이트

이 웹팩 상용구는 Google Page Speed ​​Insights 및 Google Lighthouse Reports에서 완벽한 점수를 얻기 위해 올바른 최적화를 모두 달성하면서 정적 웹사이트를 신속하게 만들려는 초급, 중급 및 고급 개발자를 위한 것입니다 . 이는 이제 tris-gulp-boilerplate의 진화된 버전입니다. Webpack 4. Webpack은 Gulp가 할 수 없었던 JS 번들링을 위한 새로운 표준입니다. 고맙게도 Webpack은 작업을 실행하고 js를 번들링할 수 있습니다.

이 프로젝트/상용구의 목표는 다음 사람들에게 다가가는 것입니다.

  1. 초보자 ? — Gulp/Webpack/Node/Npm을 사용하더라도 더 잘 아는 개발자보다 더 철저한 설명이 필요한 사람. 그들은 일이 제대로 진행되기를 원하지만 방법 과 이유 도 알고 싶어합니다.

  2. 사이드 프로젝트 허슬러 ?‍♀️ — 훌륭한 아이디어를 모두 가지고 있지만 설정에 시간을 낭비하고 싶지 않은 사람들입니다. 그들은 자신의 아이디어, 앱, 웹사이트를 브라우저에 빠르게 가져와야 합니다.

  3. 강박적인 ‍♂️ — 성과 및 최적화 보고서에서 만점을 받는 것을 좋아하는 사람들입니다. 디지털 방식으로 정리되어 있고 모든 파일이 최소화, 압축, 압축되어 배송 준비가 되어 있다는 사실에 자부심을 갖고 있는 사람들!

자유롭게 이 저장소를 포크하고 이 템플릿을 기반으로 자신만의 워크플로를 만들어보세요! 사람마다 조금씩 다르지만 이해해요.

용법

실행하기 전에 컴퓨터에 git 및 node.js가 필요합니다.

  1. git clone https://github.com/tr1s/tris-webpack-boilerplate.git your-project-name

  2. cd your-project-name && rm -rf .git

  3. npm install

  4. npm start

모든 준비가 완료되었습니다. 코딩을 시작해 보세요 ?‍?‍ !

100% 새로 시작하거나 자신만의 Sass 작업 흐름을 만들고 싶다면 src/styles/ 폴더, src/index.html 및 src/index.scss/ 에 있는 모든 항목을 제거하세요. 저는 7-1 패턴을 바탕으로 폴더 구조를 만들었습니다.

  1. 선택한 FTP/호스팅 플랫폼에 사이트를 업로드할 준비가 되면 npm run build . 이렇게 하면 모든 웹사이트 자산이 최적화되고 압축된 dist 폴더가 생성됩니다.

모든 작동 방식에 대한 자세한 설명을 원하시면 아래 기능을 읽어보세요. 그렇지 않으면 코딩을 계속하고 재미있게 보내십시오 :)

특징/내용

  • 트리스-웹팩-보일러플레이트

  • 용법

  • 특징/내용

  • 기능 설명

    • 웹팩 구성 분할

    • 웹팩 개발 서버

    • HTML 자산 및 축소

    • 404 페이지를 찾을 수 없습니다

    • SCSS에서 CSS로 + 최적화

    • ES6 트랜스파일링

    • 브라우저 목록

    • 이미지 자산 + 압축

    • 글꼴 로딩 + 사전 로딩

    • 자산 압축

    • 클린 웹팩 플러그인

    • 소스맵

    • 파비콘 생성

    • 오프라인 우선 및 캐싱

    • 프로그레시브 웹 앱(PWA)

  • 알았어

  • 기여

기능 설명

웹팩 구성 분할

하나의 큰 webpack.config.js 대신 프로덕션 및 개발 빌드를 webpack.dev.js 및 webpack.prod.js 라는 두 개의 새로운 구성으로 분할합니다. 개발과 프로덕션 모두에서 원하는 구성은 webpack.common.js 구성에 들어갑니다.

npm start 실행하면 webpack.dev.js 구성이 병합된 webpack.common.js 구성을 기반으로 개발 빌드가 실행됩니다. 이에 대한 자세한 내용은 Webpack 설명서를 참조하세요.

 /* wenpack.dev.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* webpack.common.js를 병합한 다음 추가합니다. 추가 */module.exports = merge(common, {
  모드: "개발",
  /* 나머지 코드는 여기에 위치합니다 */});

npm run build 실행하면 webpack.prod.js 구성이 병합된 webpack.common.js 구성을 기반으로 프로덕션 빌드가 실행됩니다.

 /* webpack.prod.js */const merge = require("webpack-merge");const common = require("./webpack.common.js");/* webpack.common.js를 병합한 다음 추가합니다. 추가 */module.exports = merge(common, {
  모드: "프로덕션",});

우리는 개발 및 프로덕션 빌드가 브라우저에서 시각적으로 동일한 결과를 생성하기를 원합니다. 예를 들어 코딩을 마치고 빌드를 실행한 다음 빌드에 이미지가 누락되어 완전히 다른 웹사이트를 만들고 싶지 않을 것입니다. 이것이 바로 우리가 모든 로더와 자산 관리를 처리하기 위해 webpack.common.js 가지고 있는 이유입니다. webpack.dev.js 는 더 가벼운 소스맵을 사용하면 약간 다릅니다. 마지막으로 webpack.prod.js 웹사이트를 프로덕션으로 전환하는 모든 최종 단계를 처리합니다. 이는 이미지 압축, 자산 압축(gzip), 자산 축소, 파비콘 생성, 캐싱 및 오프라인 우선 경험 생성입니다.

아래에서 각 과정을 살펴보겠습니다.

웹팩 개발 서버

webpack-dev-server는 package.json에 구성됩니다. npm start 서버를 실행하고 webpack.dev.js 구성을 사용하여 브라우저에서 프로젝트를 엽니다. npm start npm의 기본 스크립트이므로 run 추가할 필요가 없습니다. 하지만 빌드 스크립트의 경우 npm run build 입력해야 합니다.

 "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js"},

HTML 자산 및 축소

우리는 HTML을 문자열로 내보내고 출력을 축소하기 위해 html-loader를 사용합니다. 이를 통해 src/index.js 내에서 src/index.html 가져올 수 있습니다. 로더 옵션인 minimize: true 를 사용하여 HTML을 간단하게 축소할 수 있으므로 HTML을 webpack.common.js 로 이동하는 대신 webpack.prod.js 에 그대로 두는 이유입니다.

 /* webpack.common.js */{
  테스트: /.html$/,
  사용: [{loader: 'html-loader',options: { 최소화: true}
  }]},
 /* src/index.js */import "./index.html";

그런 다음 html-webpack-plugin을 사용하여 모든 올바른 자산 가져오기가 포함된 새로 생성된 index.html 생성합니다.

template: 옵션은 소스 HTML을 가져오는 곳입니다. 자신만의 HTML 템플릿, 핸들바 템플릿 또는 기타 템플릿을 사용할 수 있습니다.

inject: 옵션은 자산이 이동되는 위치입니다. Webpack은 기본적으로 번들로 제공되는 webpack-bundle.js 스크립트를 본문 하단에 배치하지만 여기서는 script-ext-html-webpack-plugin을 사용하여 defer 속성을 추가할 것이기 때문에 이를 head 로 전환했습니다. 스크립트를 작성하여 웹사이트 헤드에 배치하세요. 이는 성능에 도움이 됩니다.

 /* webpack.common.js */const HtmlWebpackPlugin = require('html-webpack-plugin');const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");plugins: [
  new HtmlWebpackPlugin({title: 'tris-webpack-boilerplate',filename: 'index.html',template: './src/index.html',inject: 'head'
  }),
  new HtmlWebpackPlugin({제목: 'tris-404-page',filename: '404.html',template: './src/404.html',inject: 'head'
  }),
  new ScriptExtHtmlWebpackPlugin({defaultAttribute: 'defer'
  }),],

여러 페이지로 구성된 웹사이트를 가지려면 new HtmlWebpackPlugin({}) 플러그인을 계속 추가하세요. title: 키를 사용하여 페이지 이름을 적절하게 지정하십시오.

404 페이지를 찾을 수 없습니다

Netlify는 웹사이트를 관리하고 배포할 수 있는 환상적인 무료 서비스입니다. Netlify는 자동으로 404.html 을 검색하여 누군가 귀하의 웹사이트에서 깨진 링크를 열려고 할 때 해당 페이지를 로드합니다. 그러니 걱정하실 것이 없습니다.

다른 서비스를 사용하는 경우 404.html 페이지를 활성화하여 링크할 수 있는 방법에 대해 조사해 보시기 바랍니다. 깨진 링크에 도달한 사람들을 메인 페이지로 다시 보내는 좋은 방법입니다.

SCSS에서 CSS로 + 최적화

Sass/SCSS를 사용하려면 원하는 결과를 얻기 위해 몇 가지 로더를 사용해야 합니다. CSS 로더, postcss-로더 및 sass-로더.

test: regex(정규 표현식)를 사용하여 sass, scss 또는 css 파일을 확인한 다음 mini-css-extract-plugin을 둘러싸서 이 세 개의 로더를 통해 실행하고 단일 CSS 파일을 생성합니다. 생산에 사용합니다.

로더의 개념에 대해 자세히 알아보세요.

 /* webpack.common.js */{
  테스트: /.(sa|sc|c)ss$/,
  사용: [MiniCssExtractPlugin.loader,{ 로더: 'css-loader', 옵션: {sourceMap: true }},{ 로더: 'postcss-loader', 옵션: {sourceMap: true }},{ 로더: 'sass-loader ', 옵션: {sourceMap: true }}
  ]},

로더 시퀀스의 두 번째 부분인 postcss-loader 에서는 CSS를 축소하고 자동 접두사를 추가합니다. 이를 위해 프로젝트 루트에 postcss.config.js 를 생성하고 다음과 같이 구성합니다.

 /* postcss.config.js */const purgecss = require("@fullhuman/postcss-purgecss");module.exports = {
  플러그인: [require("autoprefixer"),require("cssnano")({ 사전 설정: "default",}),purgecss({ 콘텐츠: ["./**/*.html"], 키프레임: true,} ),
  ],};

필요한 경우 autoprefixer 및 cssnano를 읽어 원하는 대로 구성하세요. 추가적으로 postcss는 당신의 무기고에 가지고 있는 매우 강력한 도구이므로 일반적인 내용을 읽어보십시오.

Purgecss는 코드에서 사용되지 않는 CSS를 제거하기 위한 환상적인 postcss 플러그인입니다. Purgecss는 콘텐츠와 CSS 파일을 분석합니다. 그런 다음 파일에 사용된 선택기와 콘텐츠 파일의 선택기를 일치시킵니다. CSS에서 사용되지 않는 선택기를 제거하여 CSS 파일이 작아집니다.

기본적으로 사용할 준비가 되어 있지만 직접 시각적으로 테스트하려면 @import "../node_modules/bulma/bulma"; 주석을 해제하세요. index.scss 에서 npm run build 실행하고 dist 폴더에 있는 webpack-bundle.css 결과를 살펴보세요. 코드가 그렇게 많지 않다는 것을 알 수 있습니다. 그런 다음 postcss.config.js 에서 purgecss를 제거하고 npm run build 다시 실행하면 Bulma 프레임워크에서 오는 CSS에 10,000줄 이상의 코드가 있음을 알 수 있습니다. 보시다시피 purgecss는 Bootstrap, Foundation, Bulma 등과 같은 대규모 프레임워크를 사용할 때 사용하지 않는 CSS를 제거하는 데 적합합니다!

mini-css-extract-plugin은 CSS를 추출하고 출력되기 전에 이름을 지정하는 마지막 단계입니다.

 /* webpack.common.js */const MiniCssExtractPlugin = require("mini-css-extract-plugin");plugins: [
  new MiniCssExtractPlugin({filename: 'webpack-bundle.css',chunkFilename: '[id].css'
  })],

따라서 기본적으로... css-loader 애플리케이션에서 참조되는 모든 CSS 파일에서 CSS를 수집하여 문자열에 넣습니다. 그런 다음 postcss-loader 스타일을 자동 접두어로 지정하고 축소한 다음 sass-loader 이를 JS 모듈로 변환한 다음 mini-css-extract-plugin JS 모듈의 CSS를 웹 브라우저가 구문 분석할 수 있도록 단일 CSS 파일로 추출합니다.

ES6 트랜스파일링

최신 JavaScript 기능과 구문을 사용하고 싶을 수도 있지만 아직 모든 브라우저가 이를 지원하는 것은 아닙니다. Babel이 우리를 위해 그 일을 처리해 줄 것입니다.

여기서는 모든 js 파일을 테스트하지만 node_modules 폴더는 제외하고 babel-preset-env 사전 설정을 사용하여 babel-loader를 통해 실행합니다.

 /* webpack.common.js */{
  테스트: /.js$/,
  제외: /(node_modules)/,
  사용: {loader: 'babel-loader',options: { 사전 설정: ['@babel/preset-env']}
  }}

이번에는 webpack.prod.js 파일을 살펴보겠습니다. npm run build 실행하면 출력 js가 축소되고 전체 소스맵을 갖게 됩니다. npm start 통해 개발 모드로 실행하면 여전히 더 가벼운 소스맵을 갖게 되지만 js는 축소되지 않습니다.

 /* webpack.prod.js */const TerserPlugin = require("terser-webpack-plugin");module.exports = merge(common, {
  모드: "생산",
  devtool: "소스 맵",
  최적화: {minimizer: [ new TerserPlugin({test: /.js(?.*)?$/i,parallel: true,sourceMap: true, }),],
  },});

terser 문서에서 옵션에 대해 자세히 알아보세요.

브라우저 목록

여기서 우리는 어떤 브라우저에 지원을 추가할지 특정 도구에 알릴 수 있는 한 곳을 원합니다. 우리는 browserslist와 프로젝트 루트의 해당 .browserslistrc 파일을 사용하여 이를 달성합니다. Autoprefixer와 babel-present-env는 이 파일을 선택하고 구성에 따라 필요한 것을 적용합니다.

.browserslistrc 에 전달할 수 있는 다른 내용을 읽고 browserl.ist를 사용하여 구성의 대상이 되는 브라우저가 무엇인지 확인하세요. 좋아요, 지금까지 브라우저에 대해 충분히 말한 것 같은데요?.

 /* .browserslistrc */> 0.25%죽지 않음

이미지 자산 + 압축

먼저 정규식(정규식)을 사용하여 jpeg, jpg, png, gif 및 svg를 테스트한 다음 파일 로더를 사용하여 파일 가져오기 및 요구 사항을 URL로 확인한 다음 파일을 출력 디렉터리로 내보냅니다. 따라서 src/images 폴더에서 파일을 가져오는 <img> 요소를 사용하는 경우 해당 images 을 지정된 출력 경로로 가져와서 내보냅니다. npm start (개발 실행) 또는 npm run build (빌드 실행)를 수행하면 결국 src/images 가 됩니다.

 /* webpack.common.js */{
  테스트: /.(jpe?g|png|gif|svg)$/,
  사용: [{loader: 'file-loader',options: { 이름: '[name].[ext]', outputPath: 'images/', publicPath: 'images/'},
  }]},

이제 npm run build 에서만 이미지를 최적화하려고 하므로 아래와 같이 webpack.prod.js 편집합니다.

다시 정규식을 사용하여 jpeg, jpg, png, gif 및 svg를 테스트하고 적절한 최적화를 적용합니다. gifsicle 은 무손실 gif 압축기이고, pngquant 손실이 있는 png 압축기이며, imageminMozjpeg 라는 추가 플러그인을 추가하여 손실이 있는 jpg/jpeg 압축을 수행할 수 있습니다. 안전한 방법은 품질을 75-90 사이로 설정하는 것이며 눈에 보이는 품질 손실 없이 적절한 압축을 얻을 수 있습니다.

무손실 압축을 고수하고 프로젝트에 추가하기 전에 이미지를 올바른 크기로 자르는 것이 좋습니다. 이렇게 하려면 imageminMozjpeg 및 pngQuant 키 섹션을 제거하세요.

이미지 압축을 위해tinypng를 사용할 수도 있습니다.

 /* webpack.prod.js */const ImageminPlugin = require("imagemin-webpack-plugin").default;const imageminMozjpeg = require("imagemin-mozjpeg");plugins: [
  new ImageminPlugin({test: /.(jpe?g|png|gif|svg)$/i,gifsicle: { // 무손실 gif 압축기 최적화레벨: 9,},pngQuant: { // 손실이 있는 png 압축기, 기본 무손실을 위해 제거 quality: "75",},plugins: [ imageminMozjpeg({// lossy jpg 압축기, 기본 무손실 품질을 위해 제거: "75", }),],
  }),];

글꼴 로딩 + 사전 로딩

여기서는 모든 공통 글꼴 확장자를 테스트하고 파일 로더를 다시 사용하여 글꼴 가져오기를 해결하고 출력합니다.

 /* webpack.common.js */{
  테스트: /.(woff|woff2|ttf|otf)$/,
  사용: [{loader: 'file-loader',options: { 이름: '[name].[ext]', outputPath: 'fonts/', publicPath: 'fonts/'},
  }]},

src/styles/base/_typography.scss 에서 @font-face 규칙을 통해 글꼴을 로드하고 있습니다. Google Webfonts Helper는 Google Fonts를 번거로움 없이 자체 호스팅할 수 있는 환상적인 도구이기도 합니다. CSS 트릭의 @font-face 규칙에 대해 자세히 알아보세요. 또한, 글꼴 표시 속성도 읽어보세요.

항상 글꼴을 미리 로드하는 것이 가장 좋습니다. preload-webpack-plugin을 사용하여 이를 달성할 것이며 제대로 작동하려면 HtmlWebpackPlugin 바로 뒤에 배치해야 합니다.

 /* webpack.common.js */new PreloadWebpackPlugin({
  상대: '예비 로드',
  as(entry) {if (/.(woff|woff2|ttf|otf)$/.test(entry)) return '글꼴';
  },
  fileWhitelist: [/.(woff|woff2|ttf|otf)$/],
  포함: 'allAssets'}),

자산 압축

여기에서는 html, css 및 javascript 파일 만 압축하기 위해 압축 웹팩 플러그인을 사용하여 webpack.prod.js 구성으로 돌아왔습니다. 이는 생성되는 소스맵 파일의 압축을 방지하기 위한 것입니다.

 /* webpack.prod.js */module.exports = merge(common, {
  모드: '프로덕션',
  플러그인: [new CompressionPlugin({ test: /.(html|css|js)(?.*)?$/i // 압축된 html/css/js만, 압축 소스맵 건너뛰기 등}),});

클린 웹팩 플러그인

Clean-webpack-plugin은 새 폴더를 빌드하기 전에 빌드 폴더를 제거/정리하는 간단한 웹팩 플러그인입니다. npm run build 또는 npm start 실행할 때 폴더 구조를 살펴보세요. 현재 dist 폴더(이전에 만든 폴더가 있는 경우)가 삭제되고 새 폴더가 즉시 나타납니다.

 /* webpack.common.js */const CleanWebpackPlugin = require("clean-webpack-plugin");플러그인: [new CleanWebpackPlugin(["dist"])];

소스맵

개발 도구에서 코드를 디버깅하려면 소스맵을 사용하는 것이 필수적입니다.

npm start 하고 Chrome에서 devtools를 연 다음 콘솔을 클릭하면 볼 수 있듯이 script.js 라인 1과 2에서 오는 두 개의 console.log가 있는 것을 볼 수 있습니다. 다음 폴더 구조에서 이를 쉽게 볼 수 있습니다. src/scripts/script.js . 소스맵을 사용하지 않은 경우 devtools는 이러한 console.log가 번들로 제공되는 webpack-bundle.js 에서 나오는 것으로 표시하지만 이는 별로 도움이 되지 않습니다.

우리 스타일과 비슷한 경우입니다. devtools의 body 요소를 살펴보면 _global.scss 파일과 _typography.scss 파일에서 일부 스타일이 적용되는 것을 볼 수 있습니다. 둘 다 src/styles/base/ 폴더에 있습니다. 소스맵을 생략하면 이를 알 수 없습니다. 번들로 제공되는 webpack-bundle.css 에서 가져온 스타일을 보여줍니다.

 /* webpack.dev.js */module.exports = merge(common, {
  모드: "개발",
  devtool: "인라인 소스 맵",});
 /* webpack.prod.js */module.exports = merge(common, {
  모드: "생산",
  devtool: "소스 맵",});

프로젝트에 가장 적합한 것이 무엇인지 찾으려면 다양한 종류의 소스맵에 대해 자세히 읽어보세요. 또한 webpack 문서의 devtool 옵션을 읽어보세요.

파비콘 생성

이것은 하나의 이미지 소스를 기반으로 필요한 모든 단일 아이콘을 생성하는 훌륭한 플러그인입니다. 내 src/images/ 폴더에는 favicons-webpack-plugin에 입력한 tris-package.svg 있습니다.

Apple, Android, Chrome, Firefox, Twitter, Windows에 대한 아이콘을 생성합니다. 다양한 크기의 각 아이콘을 생성하고 아이콘이 속한 웹사이트 헤드로 직접 가져옵니다. Twitter와 창은 false로 설정되어 있지만 기본값이므로 만일의 경우에 대비하여 모든 기반을 포함하도록 true로 변경했습니다.

참고: 이로 인해 빌드 시간이 크게 늘어납니다. 내부적으로 수행되는 작업의 양과 장기적으로 시간을 절약하는 방법을 고려하면 이해할 수 있습니다. npm run build 평소보다 20초 더 오래 걸리더라도 놀라지 마세요.

 /* webpack.prod.js */const FaviconsWebpackPlugin = require("favicons-webpack-plugin");module.exports = merge(common, {
  모드: "생산",
  플러그인: [new FaviconsWebpackPlugin({ 로고: "./src/images/favicon.svg", 아이콘: {twitter: true,windows: true, },}),
  ],});

오프라인 우선 및 캐싱

여기서는 오프라인 플러그인 플러그인을 사용하여 페이지 로드 시 모든 자산을 캐시합니다.

이 플러그인은 웹팩 프로젝트에 오프라인 경험을 제공하기 위한 것입니다. 이는 ServiceWorker 및 AppCache를 내부 대체 수단으로 사용합니다. webpack.prod.js 에 이 플러그인을 포함하고 클라이언트 스크립트(src/index.js)에 해당 런타임을 포함하기만 하면 프로젝트는 webpack 출력 자산 전체(또는 일부)를 캐시하여 오프라인 준비가 됩니다.

참고: npm run build 하고 변경 사항을 서버에 업로드하는 경우(또는 웹 사이트를 계속 업데이트하는 경우) 변경 사항을 보려면 웹 사이트를 닫았다가 다시 열어야 합니다. 탭을 열어서 계속 새로 고칠 수는 없습니다. 캐시를 파괴하려면 탭을 닫았다가 다시 열어야 합니다.

 /* webpack.prod.js */const OfflinePlugin = require("offline-plugin");module.exports = merge(common, {
  모드: "생산",
  플러그인: [new OfflinePlugin()],});

프로그레시브 웹 앱(PWA)

PWA(프로그레시브 웹 애플리케이션)는 일반 웹 페이지나 웹사이트처럼 로드되지만 오프라인 작업, 푸시 알림, 전통적으로 기본 애플리케이션에서만 사용할 수 있었던 장치 하드웨어 액세스 등의 기능을 사용자에게 제공할 수 있는 웹 애플리케이션입니다. PWA는 웹의 유연성과 기본 애플리케이션의 경험을 결합합니다.

이 상용구를 PWA로 만드는 마지막 단계는 필수 웹 앱 매니페스트를 프로젝트 루트에 추가하고 적절하게 구성하는 것입니다!

알았어

Webpack은 jQuery와 같은 대규모 라이브러리를 번들로 묶으려고 할 때 문제가 발생합니다. $ is not defined 또는 jQuery is not defined 와 같은 콘솔 오류가 발생하게 됩니다. 이 문제를 해결하기 위해 Webpack이 이를 외부로 처리하도록 합니다. 그런 다음 변수를 정의하고 CDN을 통해 jQuery를 포함합니다. 대부분의 사람들은 브라우저에 jQuery를 캐시해 두므로 성능 측면에서는 문제가 되지 않습니다. 기본적으로 externals: config를 추가했지만 사용하려면 jQuery CDN을 직접 추가해야 합니다.

Webpack 문서에서 외부 항목에 대해 자세히 알아보세요.

 /* webpack.common.js */plugins: [],externals: {
  $: '제이쿼리',
  jQuery: 'jQuery',
  'window.$': 'jquery',}
 /* src/index.html */<헤드>
  <scriptdefersrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script></head>

기여

나는 모든 것을 철저하게 설명하기 위해 최선을 다하지만, 더 명확하게 설명할 수 있는 것이 있으면 몇 가지 제안된 편집 사항과 함께 끌어오기 요청을 보내 주시기 바랍니다. 감사합니다!

이것이 도움이 되었기를 바랍니다! 당신이 그것에 관심이 있다면 트위터에서 나를 팔로우하세요. ?

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체