Webpack 자습서는 기본 웹 사이트의 Webpack 4 또는 5를 0부터 구성하는 방법
🌼 소개하다.
독자 안녕!🐱
알다시피, 설정 Webpack 은 사람을 낙담하게 하는 작업일 수도 있습니다.비록 좋은 문서가 있지만, 아래의 몇 가지 이유로 이 묶음기는 탑승하기에 적합하지 않다.
Webpack 팀은 매우 노력하고 개발 속도가 상대적으로 빠르다는 것은 좋은 일이다.그러나 새로운 개발자에게 한 번에 모든 것을 배우는 것은 매우 어렵다.강좌가 갈수록 낡아서 일부 플러그인이 고장나서 예시를 발견하면 곤혹스러울 수도 있다.때때로, 당신은 자질구레한 일에 갇힐 수도 있고, 구글은 GitHub에서 최종적으로 유용한 짧은 메시지를 찾을 수도 있다.
Webpack과 그 작업 원리에 대한 소개문은 매우 적다. 사람들은create react app나 vue cli 같은 도구를 직접 사용하지만, 간혹 간단한 자바스크립트와SASS를 작성해야 하며, 프레임워크나 그 어떠한 화려한 것도 필요하지 않다.
이 설명서는 ES6, SASS 및 프레임이 없는 이미지/글꼴의 웹 패키지 구성을 단계적으로 설명합니다.대부분의 간단한 사이트에서 웹팩을 사용하거나 이를 진일보한 학습의 플랫폼으로 활용하면 충분하다.이 설명서에는 웹 개발 및 JavaScript에 대한 선험적인 지식이 필요하지만 일부 사용자에게 유용할 수 있습니다.적어도 내가 Webpack을 사용하기 시작했을 때, 나는 이런 일을 만나서 매우 기뻤을 것이다!
🎈 우리의 목표
Webpack을 사용하여 JavaScript, 스타일, 이미지 및 글꼴 파일을 dist 폴더로 패키지화합니다.
Webpack은 바인딩된 JavaScript 파일과 바인딩된 CSS 파일을 생성합니다.이렇게 쉽게 HTML 파일에 추가할 수 있습니다(물론 필요한 경우 dist 폴더의 경로를 변경해야 함).
<link rel="stylesheet" href="dist/bundle.css">
<script src="dist/bundle.js"></script>
너는 가도 된다🍹
이 설명서의 전체 예제를 볼 수 있습니다.🔗 link .
주의: 최근에 의존항을 업데이트했습니다.이 설명서는 최신 Webpack 5에 적용되지만 config는 계속해서 Webpack 4에 적용되어 귀하가 필요로 하지 않도록 합니다!
🔧 개시하다
1. 웹 패키지 설치
우리는 npm: $ npm init 명령을 사용하여 가방을 만듭니다.json 파일은 프로젝트 폴더에 있으며 JavaScript 의존 항목을 배치합니다.그리고 우리는 $ npm i --save-dev webpack webpack-cli로 Webpack 자체를 설치할 수 있다.
2. 엔트리 포인트 파일 생성
Webpack은 엔트리 포인트라는 JavaScript 파일에서 작업을 시작합니다.색인을 만듭니다.js는 자바스크립트 폴더에 있습니다.정상적으로 작동할 수 있도록 console.log('Hi') 간단한 코드를 작성할 수 있습니다.
3. 웹 패키지를 만듭니다.배치하다.js
... 프로젝트 폴더에 있습니다.여기가 다예요.✨ 마법이 일어났다.
// Webpack uses this to work with directories
const path = require('path');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
// Path to your entry point. From this file Webpack will begin its work
entry: './src/javascript/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development'
};
4. 가방에 npm 스크립트를 추가합니다.json에서 Webpack 실행하기
Webpack을 실행하려면 간단한 명령 webpack 이 있는 npm 스크립트와 프로필을 설정 옵션으로 사용해야 합니다.우리의 소포.제이슨은 지금 이렇게 해야 한다.
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
5. Webpack 실행
이 기본 설정을 사용하면 $ npm run build 명령을 실행할 수 있습니다.Webpack은 우리의 입력 파일을 찾아서 그 중의 모든 import 모듈 의존항을 분석하고 그것을 하나로 포장할 것입니다.js 파일은 dist 폴더에 있습니다.콘솔에서 다음을 볼 수 있습니다.
HTML 파일에 <script src="dist/bundle.js"></script> 를 추가하면 브라우저 컨트롤러에서 볼 수 있습니다 Hi!
🔬 적재기
위대하다표준 JavaScript를 번들로 묶었습니다.그러나 ES6의 모든 멋진 기능을 사용하고 브라우저 호환성을 유지하려면 어떻게 해야 합니까?Webpack에 ES6 코드를 브라우저와 호환되는 코드로 변환(전송)하는 방법을 알려야 합니까?
이것이 바로 웹 패키지 캐리어가 작용하는 곳이다.로드 프로그램은 Webpack의 주요 기능 중 하나입니다.그들은 일부 변환을 우리의 코드에 응용할 것이다.
웹 패키지에 추가합니다.배치하다.js 파일 새 옵션 모듈입니다.규칙.이 옵션에서는 Webpack이 다양한 유형의 파일을 변환하는 방법에 대해 설명합니다.
entry: /* ... */,
output: /* ... */,
module: {
rules: [
]
}
JavaScript 파일의 경우 다음을 사용합니다.
1. 바벨 적재기
Babel는 현재 최고의 JavaScript transpiler입니다.번들에 앞서 Webpack은 현재 JavaScript 코드를 브라우저와 호환되는 JavaScript 코드로 변환하는 데 사용한다고 알려 줍니다.
Babel loader가 그렇게 했어요.설치를 시작하겠습니다.$ npm i --save-dev babel-loader @babel/core @babel/preset-env이제 JavaScript 파일에 대한 규칙을 추가합니다.
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
Webpack을 사용하여 JavaScript, 스타일, 이미지 및 글꼴 파일을 dist 폴더로 패키지화합니다.
Webpack은 바인딩된 JavaScript 파일과 바인딩된 CSS 파일을 생성합니다.이렇게 쉽게 HTML 파일에 추가할 수 있습니다(물론 필요한 경우 dist 폴더의 경로를 변경해야 함).
<link rel="stylesheet" href="dist/bundle.css">
<script src="dist/bundle.js"></script>
이 설명서의 전체 예제를 볼 수 있습니다.🔗 link .
주의: 최근에 의존항을 업데이트했습니다.이 설명서는 최신 Webpack 5에 적용되지만 config는 계속해서 Webpack 4에 적용되어 귀하가 필요로 하지 않도록 합니다!
🔧 개시하다
1. 웹 패키지 설치
우리는 npm: $ npm init 명령을 사용하여 가방을 만듭니다.json 파일은 프로젝트 폴더에 있으며 JavaScript 의존 항목을 배치합니다.그리고 우리는 $ npm i --save-dev webpack webpack-cli로 Webpack 자체를 설치할 수 있다.
2. 엔트리 포인트 파일 생성
Webpack은 엔트리 포인트라는 JavaScript 파일에서 작업을 시작합니다.색인을 만듭니다.js는 자바스크립트 폴더에 있습니다.정상적으로 작동할 수 있도록 console.log('Hi') 간단한 코드를 작성할 수 있습니다.
3. 웹 패키지를 만듭니다.배치하다.js
... 프로젝트 폴더에 있습니다.여기가 다예요.✨ 마법이 일어났다.
// Webpack uses this to work with directories
const path = require('path');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
// Path to your entry point. From this file Webpack will begin its work
entry: './src/javascript/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development'
};
4. 가방에 npm 스크립트를 추가합니다.json에서 Webpack 실행하기
Webpack을 실행하려면 간단한 명령 webpack 이 있는 npm 스크립트와 프로필을 설정 옵션으로 사용해야 합니다.우리의 소포.제이슨은 지금 이렇게 해야 한다.
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
5. Webpack 실행
이 기본 설정을 사용하면 $ npm run build 명령을 실행할 수 있습니다.Webpack은 우리의 입력 파일을 찾아서 그 중의 모든 import 모듈 의존항을 분석하고 그것을 하나로 포장할 것입니다.js 파일은 dist 폴더에 있습니다.콘솔에서 다음을 볼 수 있습니다.
HTML 파일에 <script src="dist/bundle.js"></script> 를 추가하면 브라우저 컨트롤러에서 볼 수 있습니다 Hi!
🔬 적재기
위대하다표준 JavaScript를 번들로 묶었습니다.그러나 ES6의 모든 멋진 기능을 사용하고 브라우저 호환성을 유지하려면 어떻게 해야 합니까?Webpack에 ES6 코드를 브라우저와 호환되는 코드로 변환(전송)하는 방법을 알려야 합니까?
이것이 바로 웹 패키지 캐리어가 작용하는 곳이다.로드 프로그램은 Webpack의 주요 기능 중 하나입니다.그들은 일부 변환을 우리의 코드에 응용할 것이다.
웹 패키지에 추가합니다.배치하다.js 파일 새 옵션 모듈입니다.규칙.이 옵션에서는 Webpack이 다양한 유형의 파일을 변환하는 방법에 대해 설명합니다.
entry: /* ... */,
output: /* ... */,
module: {
rules: [
]
}
JavaScript 파일의 경우 다음을 사용합니다.
1. 바벨 적재기
Babel는 현재 최고의 JavaScript transpiler입니다.번들에 앞서 Webpack은 현재 JavaScript 코드를 브라우저와 호환되는 JavaScript 코드로 변환하는 데 사용한다고 알려 줍니다.
Babel loader가 그렇게 했어요.설치를 시작하겠습니다.$ npm i --save-dev babel-loader @babel/core @babel/preset-env이제 JavaScript 파일에 대한 규칙을 추가합니다.
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
// Webpack uses this to work with directories
const path = require('path');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
// Path to your entry point. From this file Webpack will begin its work
entry: './src/javascript/index.js',
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '',
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development'
};
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
위대하다표준 JavaScript를 번들로 묶었습니다.그러나 ES6의 모든 멋진 기능을 사용하고 브라우저 호환성을 유지하려면 어떻게 해야 합니까?Webpack에 ES6 코드를 브라우저와 호환되는 코드로 변환(전송)하는 방법을 알려야 합니까?
이것이 바로 웹 패키지 캐리어가 작용하는 곳이다.로드 프로그램은 Webpack의 주요 기능 중 하나입니다.그들은 일부 변환을 우리의 코드에 응용할 것이다.
웹 패키지에 추가합니다.배치하다.js 파일 새 옵션 모듈입니다.규칙.이 옵션에서는 Webpack이 다양한 유형의 파일을 변환하는 방법에 대해 설명합니다.
entry: /* ... */,
output: /* ... */,
module: {
rules: [
]
}
1. 바벨 적재기
Babel는 현재 최고의 JavaScript transpiler입니다.번들에 앞서 Webpack은 현재 JavaScript 코드를 브라우저와 호환되는 JavaScript 코드로 변환하는 데 사용한다고 알려 줍니다.
Babel loader가 그렇게 했어요.설치를 시작하겠습니다.
$ npm i --save-dev babel-loader @babel/core @babel/preset-env이제 JavaScript 파일에 대한 규칙을 추가합니다.rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
test는 우리가 변환할 파일의 확장자regular expression입니다.예를 들면 JavaScript 파일입니다.exclude는 모듈을 변환할 때 어떤 경로를 무시해야 하는지 알려주는 정규 표현식입니다.이것은 앞으로 가져오면 npm에서 가져오는 공급업체 라이브러리를 바꾸지 않을 것입니다.use는 주요 규칙의 옵션이다.여기에 loader를 설정했습니다. testregexp (이 예는 자바스크립트 파일) options 마운트 장치에 따라 다를 수 있습니다.이 경우 Babel의 기본 사전 설정을 설정하여 Babel이 변환해야 할 ES6 기능, 그렇지 않은 것을 고려합니다.이것은 단독적인 화제이다. 만약 당신이 흥미가 있다면 깊이 연구할 수 있지만, 지금은 이런 상태를 유지하는 것이 안전하다.2.sass 로더
스타일을 바꿀 때가 됐어.일반적으로 우리는 간단한 CSS를 작성하고 싶지 않습니다.우리는 자주 SASS 프로세서를 사용한다.SASS를 CSS로 변환한 다음 자동 접두사 및 축소를 적용합니다.CSS의 기본 방법입니다.Webpack에게 이를 알려줍시다.
기본 SASS 파일 SASS/스타일을 가져오는 경우우리javascripts/index의SCS.js 입구점.
import '../sass/styles.scss';
$ npm i --save-dev sass sass-loader postcss-loader css-loaderSASS 파일에 새 규칙을 추가하고 Webpack에서 이러한 규칙을 처리하는 방법을 알려줄 수 있습니다.rules: [
{
test: /\.js$/,
/* ... */
},
{
// Apply rule for .sass, .scss or .css files
test: /\.(sa|sc|c)ss$/,
// Set loaders to transform files.
// Loaders are applying from right to left(!)
// The first loader will be applied after others
use: [
{
// This loader resolves url() and @imports inside CSS
loader: "css-loader",
},
{
// Then we apply postCSS fixes like autoprefixer and minifying
loader: "postcss-loader"
},
{
// First we transform SASS to standard CSS
loader: "sass-loader"
options: {
implementation: require("sass")
}
}
]
}
]
use 수조에서 마지막부터 첫 번째까지 하나씩 적용될 것이다.이제 Webpack이 코드에서
import 'file.scss';를 만났을 때 무엇을 해야 할지 알 수 있습니다!우편번호
PostSS loader에서 어떤 변환을 적용해야 하는지 어떻게 알려야 합니까?우리는 단독 프로필
postcss.config.js을 만들고 스타일에 필요한 POSTSS 플러그인을 사용합니다.CSS가 당신의 진정한 사이트를 위해 준비할 수 있도록 가장 기본적이고 유용한 플러그인을 축소하고 자동으로 리셋하는 것을 발견할 수 있습니다.먼저 POSTSS 플러그인을 설치합니다
$ npm i --save-dev autoprefixer cssnano.둘째, PostSS에 추가합니다.배치하다.js 파일은 다음과 같습니다.
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano'),
// More postCSS modules here if needed
]
}
모든 CSS 설정 후 하나만 남았습니다.Webpack이 문제를 해결합니다.SCS에서 가져오고 변환한 다음에...다음은요?그것은 신기하게 하나를 창조하지 못할 것이다.css 파일과 스타일 묶기;우리는 반드시 Webpack으로 하여금 이렇게 하게 해야 한다.그러나 이 임무는 적재기의 능력을 초과했다.Webpack 플러그인을 사용해야 합니다.
🔌 플러그 인
그들의 목적은 불러오는 프로그램이 할 수 없는 일을 하는 것입니다. 변환된 모든 CSS를 단독 'bundle' 파일로 추출해야 한다면 플러그인을 사용해야 합니다.우리 사례에는 특별한 플러그인이 하나 있다. 미니스 섹트랙 플러그인:$ npm i --save-dev mini-css-extract-plugin웹 페이지의 시작 부분에서 플러그인을 따로 가져올 수 있습니다.배치하다.js 파일:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.rules 배열에 로더를 설정한 다음 새 plugins 코드를 추가하고 옵션을 사용하여 플러그인을 활성화합니다.
module: {
rules: [
/* ... */
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
이제 이 플러그인을 CSS 로더에 연결할 수 있습니다.
{
test: /\.(sa|sc|c)ss$/,
use: [
{
// After all CSS loaders, we use a plugin to do its work.
// It gets all transformed CSS and extracts it into separate
// single bundled file
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
},
/* ... Other loaders ... */
]
}
완성!계속하면 $ npm run build 명령을 실행하고 버블을 찾을 수 있습니다.디스플레이 폴더의 css 파일입니다.현재 일반 설정은 다음과 같습니다.
Webpack에는 다양한 용도로 사용할 수 있는 플러그인이 많습니다.당신은 official documentation에서 필요에 따라 탐색할 수 있습니다.
🔬 추가 로더:이미지 및 글꼴
이제 Webpack의 기본 작동 방법을 알아야 합니다.하지만 우리는 아직 완성하지 못했다.대부분의 웹 사이트에는 CSS를 통해 설정된 이미지와 글꼴에 대한 리소스가 필요합니다.css 로더 덕분에 Webpack은 background-image: url(...) 줄을 해석할 수 있지만, URL을 로 설정하면 알 수 없습니다.png 또는 jpg 파일입니다.
CSS에서 파일을 처리하거나 JavaScript에서 직접 가져올 수 있는 새 로더가 필요합니다.이것은 다음과 같습니다.
파일 로더
$ npm i --save-dev file-loader를 사용하여 설치하고 저희 홈페이지에 새로운 규칙을 추가합니다.배치하다.js:
rules: [
{
test: /\.js$/,
/* ... */
},
{
test: /\.(sa|sc|c)ss$/,
/* ... */
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
}
]
이제 CSS에서 다음 이미지를 사용하는 경우
body {
background-image: url('../images/cat.jpg');
}
Webpack은 이 문제를 성공적으로 해결합니다.디스플레이/이미지 폴더에서 해시 이름을 포함하는 그림을 찾을 수 있습니다.소포 안에 있어요.css 당신은 이런 것을 발견할 수 있습니다.
body {
background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg);
}
보시다시피, Webpack은 매우 스마트합니다. 이것은 당신의 URL이 디스켓 폴더에 대한 경로를 정확하게 해석합니다.
글꼴에 규칙을 추가하고 그림과 유사한 형식으로 해석할 수도 있다.일관성을 유지하기 위해 outputPath를 fonts 폴더로 변경합니다.
rules: [
{
test: /\.js$/,
/* ... */
},
{
test: /\.(sa|sc|c)ss$/,
/* ... */
},
{
test: /\.(png|jpe?g|gif|svg)$/,
/* ... */
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
}
]
🏆 마무리
이렇게!클래식 웹 사이트의 간단한 웹 설정우리는 입구점, 마운트 프로그램, 플러그인의 개념, 그리고 Webpack이 파일을 어떻게 변환하고 포장하는지 소개했다.
물론 이것은 웹팩에 대한 일반적인 개념을 이해하기 위한 매우 간단한 설정이다.필요하면 소스 코드 맵, 열 리셋, 자바스크립트 프레임워크 설정, 그리고 Webpack이 할 수 있는 모든 것을 추가할 수 있지만, 이 안내서의 범위를 넘어선 것 같습니다.
만약 어려움이 있거나 더 많은 정보를 알고 싶다면, 나는 당신이 웹 페이지를 보는 것을 건의합니다. official documentation즐거움을 묶어라!
Reference
이 문제에 관하여(Webpack 자습서는 기본 웹 사이트의 Webpack 4 또는 5를 0부터 구성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module: {
rules: [
/* ... */
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
{
test: /\.(sa|sc|c)ss$/,
use: [
{
// After all CSS loaders, we use a plugin to do its work.
// It gets all transformed CSS and extracts it into separate
// single bundled file
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
},
/* ... Other loaders ... */
]
}
이제 Webpack의 기본 작동 방법을 알아야 합니다.하지만 우리는 아직 완성하지 못했다.대부분의 웹 사이트에는 CSS를 통해 설정된 이미지와 글꼴에 대한 리소스가 필요합니다.css 로더 덕분에 Webpack은
background-image: url(...) 줄을 해석할 수 있지만, URL을 로 설정하면 알 수 없습니다.png 또는 jpg 파일입니다.CSS에서 파일을 처리하거나 JavaScript에서 직접 가져올 수 있는 새 로더가 필요합니다.이것은 다음과 같습니다.
파일 로더
$ npm i --save-dev file-loader를 사용하여 설치하고 저희 홈페이지에 새로운 규칙을 추가합니다.배치하다.js:rules: [
{
test: /\.js$/,
/* ... */
},
{
test: /\.(sa|sc|c)ss$/,
/* ... */
},
{
// Now we apply rule for images
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
// Using file-loader for these files
loader: "file-loader",
// In options we can set different things like format
// and directory to save
options: {
outputPath: 'images'
}
}
]
}
]
body {
background-image: url('../images/cat.jpg');
}
body {
background-image: url(images/e1d5874c81ec7d690e1de0cadb0d3b8b.jpg);
}
글꼴에 규칙을 추가하고 그림과 유사한 형식으로 해석할 수도 있다.일관성을 유지하기 위해 outputPath를 fonts 폴더로 변경합니다.
rules: [
{
test: /\.js$/,
/* ... */
},
{
test: /\.(sa|sc|c)ss$/,
/* ... */
},
{
test: /\.(png|jpe?g|gif|svg)$/,
/* ... */
},
{
// Apply rule for fonts files
test: /\.(woff|woff2|ttf|otf|eot)$/,
use: [
{
// Using file-loader too
loader: "file-loader",
options: {
outputPath: 'fonts'
}
}
]
}
]
🏆 마무리
이렇게!클래식 웹 사이트의 간단한 웹 설정우리는 입구점, 마운트 프로그램, 플러그인의 개념, 그리고 Webpack이 파일을 어떻게 변환하고 포장하는지 소개했다.
물론 이것은 웹팩에 대한 일반적인 개념을 이해하기 위한 매우 간단한 설정이다.필요하면 소스 코드 맵, 열 리셋, 자바스크립트 프레임워크 설정, 그리고 Webpack이 할 수 있는 모든 것을 추가할 수 있지만, 이 안내서의 범위를 넘어선 것 같습니다.
만약 어려움이 있거나 더 많은 정보를 알고 싶다면, 나는 당신이 웹 페이지를 보는 것을 건의합니다. official documentation즐거움을 묶어라!
Reference
이 문제에 관하여(Webpack 자습서는 기본 웹 사이트의 Webpack 4 또는 5를 0부터 구성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Webpack 자습서는 기본 웹 사이트의 Webpack 4 또는 5를 0부터 구성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/antonmelnyk/how-to-configure-webpack-from-scratch-for-a-basic-website-46a5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
