Webpack Unpacket: 웹 사이트 자산을 패키지화하는 현대적 방식
12207 단어 webdevbabeljavascriptwebpack
Webpack은 언뜻 보기에는 매우 무서운 것 같지만, 본고는 당신이 Webpack을 스스로 설정할 수 있는 충분한 지식을 확보할 것입니다.
Webpack은 도대체 무엇입니까?
구글이 어떻게 정의하는지 살펴보자. "웹 패키지는 소스 자바스크립트 모듈 귀속기입니다. 주로 자바스크립트를 위한 디자인이지만, 그에 상응하는 마운트 프로그램을 포함하면 HTML, CSS, 이미지 등 전방 자산을 변환할 수 있습니다. 웹 패키지는 의존적인 모듈을 가져와 이 모듈을 대표하는 정적 자산을 생성합니다."
너는 정의에서 '마운트 머신' 과 같은 새로운 용어를 만날 수 있다.계속하기 전에 몇 가지 용어를 살펴보자.
마운트기: 마운트는 웹 패키지에서 각종 파일 확장자를 처리하는 데 도움을 주는 제3자 확장자입니다.예를 들어, CSS, 이미지 등의 로더가 있습니다.
로드 프로그램의 목표는 모듈에서 파일을 변환하는 것입니다(JavaScript 제외).파일이 하나의 모듈이 되면 웹 패키지는 프로젝트의 의존항으로 사용할 수 있습니다.
첫 번째 패키지 응용 프로그램
우리 작은 일부터 시작합시다.새 폴더를 만들고 명령npm init -y을 사용하여 새 노드 항목을 초기화합니다.사용 npm i -D webpack webpack-cli 설치 및 패키지 관련 의존 항목
주의: 웹 패키지 의존 항목은 개발자 의존 항목이어야 합니다.
다음 파일을 초기화합니다.
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
// src/index.html
console.log("Hello Webpack!")
마지막으로 package.json에 다음 스크립트를 추가합니다.
"scripts": {
"build": "webpack --config webpack.config.js"
}
현재, 당신은 npm run build 생성 dist/bundle.js 을 사용하고 실행 public/index.html 을 사용하여 생성된 패키지를 이용할 수 있습니다.
마운트 추가
너는 이렇게 많은 일을 해야 한다고 생각할 수도 있다.내 친구를 걱정하지 마라, 이것이 바로 Webpack 마력의 시작이다.file-loader 및 업데이트npm i -D file-loader를 사용하여 프로젝트에 webpack.config.js 추가
module.exports = {
// ...
module: {
// defining the rules for additional modules, other than .js files
// you can very well use rules for .js files too, eg: using babel-loader
rules: [
{
// files the rule applies to (using RegEx is a good practice)
test: /\.(png|jpe?g|svg)$/,
// loaders & configuration
use: [
{
loader: 'file-loader',
// if you skip the options, the default options will be used
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
이제 이미지 파일을 프로젝트로 가져올 수 있습니다.
// src/index.js
// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'
const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
실행 build 스크립트로 파일을 생성합니다.개방형public/index.html
플러그인 추가
웹 패키지가 자동으로 스크립트 파일을 페이지에 추가할 수 있도록 HTML 처리 방식을 최적화합니다.명령html-webpack-plugin을 사용하여 추가npm i -D html-webpack-plugin합니다.
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
script에서 public/index.html 라벨을 떼어내다.Webpack은 스크립트를 실행합니다.dist 폴더에 추가 index.html 파일을 생성합니다. 사용할 수 있습니다.
Dev 서버 사용
페이지를 반복해서 다시 불러오는 것은 왕왕 큰 고통을 가져올 수 있다.이 문제를 해결하기 위해서 우리는 webpack-dev-server이 있다.
사용npm i -D webpack-dev-server 의존항을 설치합니다.
// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
마지막으로 다른 스크립트를 추가해야 합니다.
"start": "webpack serve --config webpack.config.js"
웹 패키지 서버를 시작할 수 있습니다 npm start마무리
이것이 바로 당신이 알아야 할 웹 패키지에 대한 모든 정보입니다...이것은 단지 모듈 귀속기일 뿐입니다. 불러오는 프로그램과 플러그인을 사용하여 자신의 요구에 따라 설정할 수 있습니다.다음 기사에서 사용 가능한 추가 플러그인을 볼 수 있습니다.
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack Demo</title>
</head>
<body>
<script src="../dist/bundle.js"></script>
</body>
</html>
// src/index.html
console.log("Hello Webpack!")
"scripts": {
"build": "webpack --config webpack.config.js"
}
너는 이렇게 많은 일을 해야 한다고 생각할 수도 있다.내 친구를 걱정하지 마라, 이것이 바로 Webpack 마력의 시작이다.
file-loader 및 업데이트npm i -D file-loader를 사용하여 프로젝트에 webpack.config.js 추가module.exports = {
// ...
module: {
// defining the rules for additional modules, other than .js files
// you can very well use rules for .js files too, eg: using babel-loader
rules: [
{
// files the rule applies to (using RegEx is a good practice)
test: /\.(png|jpe?g|svg)$/,
// loaders & configuration
use: [
{
loader: 'file-loader',
// if you skip the options, the default options will be used
options: {
name: '[name].[ext]',
outputPath: 'images/',
},
},
],
},
],
},
};
// src/index.js
// NOTE: you can use ES Modules import/export statements
import natureImg from './assets/nature.jpg'
const img = document.createElement('img')
img.src = natureImg
document.body.appendChild(img)
build 스크립트로 파일을 생성합니다.개방형public/index.html 플러그인 추가
웹 패키지가 자동으로 스크립트 파일을 페이지에 추가할 수 있도록 HTML 처리 방식을 최적화합니다.명령html-webpack-plugin을 사용하여 추가npm i -D html-webpack-plugin합니다.
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
script에서 public/index.html 라벨을 떼어내다.Webpack은 스크립트를 실행합니다.dist 폴더에 추가 index.html 파일을 생성합니다. 사용할 수 있습니다.
Dev 서버 사용
페이지를 반복해서 다시 불러오는 것은 왕왕 큰 고통을 가져올 수 있다.이 문제를 해결하기 위해서 우리는 webpack-dev-server이 있다.
사용npm i -D webpack-dev-server 의존항을 설치합니다.
// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
마지막으로 다른 스크립트를 추가해야 합니다.
"start": "webpack serve --config webpack.config.js"
웹 패키지 서버를 시작할 수 있습니다 npm start마무리
이것이 바로 당신이 알아야 할 웹 패키지에 대한 모든 정보입니다...이것은 단지 모듈 귀속기일 뿐입니다. 불러오는 프로그램과 플러그인을 사용하여 자신의 요구에 따라 설정할 수 있습니다.다음 기사에서 사용 가능한 추가 플러그인을 볼 수 있습니다.
// webpack.config.js
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
};
페이지를 반복해서 다시 불러오는 것은 왕왕 큰 고통을 가져올 수 있다.이 문제를 해결하기 위해서 우리는
webpack-dev-server이 있다.사용
npm i -D webpack-dev-server 의존항을 설치합니다.// webpack.config.js
// ...
module.exports = {
// ...
devServer: {
port: 3000, // default: 8000
},
};
"start": "webpack serve --config webpack.config.js"
npm start마무리
이것이 바로 당신이 알아야 할 웹 패키지에 대한 모든 정보입니다...이것은 단지 모듈 귀속기일 뿐입니다. 불러오는 프로그램과 플러그인을 사용하여 자신의 요구에 따라 설정할 수 있습니다.다음 기사에서 사용 가능한 추가 플러그인을 볼 수 있습니다.
현재 프로젝트는 완전히 사용자 정의된 웹 패키지를 사용하고 있습니다. 마음대로 보십시오.
루피수비 / 크라우드 펀딩
🤑💰 이더리움 블록체인 지원 플랫폼으로 창의적인 프로젝트를 생활에 도입
읽어주셔서 감사합니다.
최고의 프런트엔드 개발 프리랜서가 필요합니까?전화 Upwork로 문의하십시오.
뭐 하는지 보고 싶으세요?내 보기 GitHub
2022년 중 디지털 유목자로 출발하는 프리랜서입니다.길을 재촉하고 싶습니까?따라와.
내 블로그에 관심을 가지고 매주 뉴스를 이해하다
FAQ
다음은 내가 자주 묻는 몇 가지 문제다.그래서 나는 이 흔한 문제 부분이 너의 문제를 해결할 수 있기를 바란다.
저는 초보자입니다. 전단 네트워크 개발을 어떻게 배워야 합니까?
다음 기사를 보십시오.
죄송하지만, 제 업무량이 너무 많아서, 누구를 지도할 시간이 없습니다.
앞에서 말한 바와 같이, 나는 지금 시간이 촉박한 시기에 처해 있기 때문에, 나는 어쩔 수 없이 이런 기회를 포기해야 한다.
Reference
이 문제에 관하여(Webpack Unpacket: 웹 사이트 자산을 패키지화하는 현대적 방식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ruppysuppy/webpack-unpacked-a-pragmatic-guide-486f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
