출력: 출력 옵션을 구성하면 webpack이 컴파일된 파일을 하드 디스크에 쓰는 방법을 제어할 수 있습니다. 여러 진입점이 존재할 수 있더라도 하나의 출력 구성 만 지정됩니다.
먼저 npm init 프로젝트를 초기화하고 webpack 과 webpack-cli 로컬에 설치한 다음 루트 디렉터리에 index.html , webpack.config.js , src 폴더를 만들고 해당 폴더에 항목 파일로 main.js 를 만듭니다.
준비 작업이 완료되면 그림과 같습니다.
main.js
함수 구성요소(){
var div=document.createElement('div')
div.innerHTML="내보내기 구성을 함께 배워볼까요~"
반환 div
}
document.body.appendChild(Component()) index.html
<본문>
<script src="./dist/bundle.js"></script>
</body> packag.json
"스크립트": {
"test": "echo "오류: 지정된 테스트가 없습니다" && 종료 1",
"build":"webpack" //추가 }, 구성 부분: webpack.config.js
output 옵션을 구성하면 webpack이 컴파일된 파일을 하드 디스크에 쓰는 방법을 제어할 수 있습니다.
여러入口점이 있을 수 있더라도输出구성은 하나만 지정됩니다.
다음은 출력 구성의 여러 개념입니다.
1. 경로
경로는 리소스 출력의 위치를 지정하며 필수 값은 다음과 같은 절대 경로여야 합니다 . :
const path=require(' 경로')
모듈.수출={
항목:'./src/main.js',
산출:{
파일 이름:'bundle.js',
//리소스 출력 위치를 프로젝트의 dist 디렉터리 경로로 설정합니다: path.resolve(__dirname, 'dist')
},
} Webpack 4 이후에는 output.path가 dist 디렉터리로 기본 설정되었습니다 . 변경할 필요가 없는 한 별도로 구성할 필요가 없으므로 webpack4 이상인 경우
module.exports={ 라고 쓰면 됩니다.
항목:'./src/main.js',
산출:{
파일 이름:'bundle.js',
},
} 2. filename
filename의 기능은 문자열 형식의 출력 리소스의 파일 이름을 제어하는 것 입니다. 여기에서는 이름을 bundle.js 로 지정합니다. 이는 리소스가 Bundle.js라는 파일로 출력되기를 원한다는 의미입니다.
module.exports={
항목:'./src/main.js',
산출:{
파일 이름:'bundle.js',
},
} 패키징 후 그림과 같이 자동으로 dist 폴더가 생성되고 그 안에 bundle.js 파일이 저장됩니다.
filename은 번들 이름일 뿐만 아니라 상대 경로일 수도 있습니다.
경로에 디렉터리가 존재하지 않아도 상관없습니다. Webpack은 리소스를 출력할 때 디렉터리를 생성합니다. 예:
module.exports = {
출력: {
파일 이름: './js/bundle.js',
},
}; 포장 후 그림과 같이:
다중 항목 시나리오에서는 생성된 각 번들에 대해 다른 이름을 지정해야 합니다. Webpack은 템플릿 언어와 유사한 형식을 사용하여 파일 이름을 동적으로 생성하는 것을 지원합니다 .
그 전에vender.js
에 새 항목 파일을 src
함수 구성요소(){
var div=document.createElement('div')
div.innerHTML="두 번째 항목 파일입니다."
반환 div
}
document.body.appendChild(Component()) webpack.config.js:
module.exports = {
기입:{
메인:'./src/main.js',
벤더:'./src/vender.js'
},
출력: {
파일 이름: '[이름].js',
},
}; 포장 후 그림과 같이:
파일 이름의 [name] 청크 이름, 즉 주 및 공급업체로 대체됩니다. 따라서 결국 vendor.js 와 main.js 생성됩니다
. 내용을 보려면 index.html 의 내용을 변경하고 마지막으로 패키지된 번들
<body>의 경로를 일치시켜야 합니다.
<script src="./dist/main.js"></script>
<script src="./dist/vender.js"></script>
</body> [질문] 이때 필요한 것이 있는데
index.html생성된 번들을 html에 자동으로 추가하도록 하려면 어떻게 해야 합니까? 여기에서 플러그인 HtmlWebpackPlugin을 사용할 수 있습니다. 자세한 내용은 아래를 참조하세요.
3.
청크 이름을 참조할 수 있는 [name] 외에도 파일 이름 구성에 사용할 수 있는 몇 가지 다른 템플릿 변수가 있습니다
을 수행할 수 있습니다
.[hash] 및 [chunkhash] 청크 내용과 직접 관련됩니다. 파일 이름에 사용되면 청크 내용이 변경될 때 리소스 파일 이름도 변경될 수 있습니다. 사용자는 다음에 로컬 캐시를 사용하지 않고 리소스 파일을 요청할 때 즉시 새 버전을 다운로드하게 됩니다.
[query] 도 비슷한 효과를 가질 수 있지만 청크 내용과 관련이 없으며 개발자가 수동으로 지정해야 합니다.
4. publicPath
publicPath는 리소스 요청 위치를 지정하는 데 사용되는 매우 중요한 구성 항목입니다.
import Img from './img.jpg'를
예로 들어 보겠습니다.
함수 구성요소() {
//...
var img = 새 이미지();
myyebo.src = Img //URL 요청
//...
} {
//...
쿼리: {
이름: '[이름].[내선]',
출력 경로: '정적/img/',
공개 경로: './dist/static/img/'
}
} 위 예시와 같이 원본 이미지 요청 주소는 ./img.jpg 이지만, 설정에 publicPath 추가하면 실제 경로는 ./dist/static/img/img.jpg 되므로 이미지는 다음에서 얻을 수 있습니다. 패키지된 리소스에는
3가지 형식이 있습니다
.
이러한 리소스를 요청할 때 현재 페이지의 HTML 경로가 실제 요청을 구성하기 위해 상대 경로에 추가됩니다.
//현재 HTML 주소가 https://www.example.com/app/index.html이라고 가정합니다. //비동기적으로 로드된 리소스의 이름은 1.chunk.js입니다. publicPath:"" //-->https://www.example.com/app/1.chunk.js pubilicPath:"./js" //-->https://www.example.com/app/js/1.chunk.js publicPath:"../assets/" //-->https://www.example.com/assets/1.chunk.js
호스트 관련
publicPath 값이 "/"로 시작하면 publicPath가 다음 위치에 있음을 의미합니다. 이번에는 현재 페이지의 호스트 이름이 기본 경로입니다
. // 현재 HTML 주소가 https://www.example.com/app/index.html이라고 가정합니다. //비동기적으로 로드된 리소스의 이름은 1.chunk.js입니다. publicPath:"/" //-->https://www.example.com/1.chunk.js pubilicPath:"/js/" //-->https://www.example.com/js/1.chunk.js
CDN 관련
위의 두 경로는 절대 경로를 사용하여 publicPath 를 구성할 수도 있습니다
. 일반적으로 정적 리소스가 CDN에 배치되는 경우 해당 도메인 이름이 현재 페이지 도메인 이름과 일치하지 않으므로
publicPath가 프로토콜 헤더 또는 상대 경로 형식으로 시작되는 경우
이를 지정해야 합니다.프로토콜, 이는 현재 경로가 CDN 관련임을 의미합니다
. //현재 HTML 주소는 https://www.example.com/app/index.html이라고 가정합니다. //비동기적으로 로드된 리소스의 이름은 1.chunk.js입니다. publicPath:"http://cdn.com/" //-->http://cdn.com/1.chunk.js publicPath:"https://cdn.com/" //-->https://cdn.com/1.chunk.js pubilicPath:"//cdn.com/assets" //-->//cdn.com/assets/1.chunk.js
1. 단일 출입구
webpack에서 output 속성을 구성하기 위한 최소 요구 사항은 다음 두 가지 사항을 포함하여 해당 값을 객체로 설정하는 것입니다.
filename 은 출력 파일의 파일 이름입니다.path 의 절대 경로module.exports={
항목:'./src/main.js',
산출:{
파일 이름:'bundle.js',
},
}
//webpack 4 이후에는 기본적으로 dist가 생성되므로 여기서는 경로가 생략됩니다. 2. 여러 항목
구성에서 여러 개의 개별 "청크"를 생성하는 경우 각 파일이고유
한 이름을 갖도록 자리 표시자를 사용해야 합니다.
여기에 언급된 파일 이름의 [name] 이 사용됩니다.
또한 이러한 리소스를 지정된 폴더에 넣으려면 path 구성
module.exports={를 추가할 수 있습니다.
항목: {
메인: './src/main.js',
벤더: './src/vender.js'
},
출력: {
파일 이름: '[이름].js',
경로: __dirname + '/dist/assets' //패키지 번들이 /dist/assets 디렉터리에 위치하도록 지정}
}
// 패키징 후 생성: ./dist/assets/main.js, ./dist/assets/vender.js 이 장의 위의 나머지 문제는 플러그인 HtmlWebpackPlugin 사용하여 해결할 수 있습니다.
플러그인 설치
npm install --save-dev html-webpack-plugin
플러그인 구성
const HtmlWebpackPlugin=require('html-webpack-plugin') //모듈 로드 module.exports = {
기입:{
메인:'./src/main.js',
벤더:'./src/vender.js'
},
//플러그인 추가 플러그인:[
새로운 HtmlWebpackPlugin({
제목:'출력 관리'
})
],
출력: {
파일 이름: '[이름].js',
},
}; 패키징이
완료되면 생성된 리소스를 자동으로 추가하는 새로운 index.html dist에 나타나는 것을 볼 수 있으며, 열면 브라우저에 콘텐츠가 표시됩니다.
이는 향후 프로젝트를 초기화할 때 index.html 작성할 필요가 없다는 의미입니다.
소스 코드는
https://sanhuamao1.coding.net/public/webpack-test/webpack-test/git/
에서 얻을 수 있습니다.파일