기본 소개
가져 오기 문서
// a.js
require('./b.js')
require('style-loader!css-loader!./a.css')
압축 된 파일
// cli
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader!'
미리보기 HTML
// html
<script src='./a.bundle.js'></script>
웹팩选项参数
--watch
--progress
--display-모듈
--display-이유
--color
--display-오류 세부 사항
기본 구성
프로젝트를 생성
MKDIR 웹팩 Demo-
CD-데모 웹팩
NPM 초기화
NPM 설치 웹팩 --save-DEV
에서 mkdir SRC
MKDIR DIST
VSC를 // VSCode가
도입 bundle.js는 html로 만들
webpack.config.js가 // 공식 네트워크 구성 API를 참조 작성
//模块化输出
module.exports={
//
entry:'./src/script/main.js',
output:{
path:'./dist/js',
filename:'bundle.js'
},
}
//cli
webpack --config webpack.dev.config.js//指定config文件为webpack.dev.config.js
//
세부 항목 및 출력
엔트리 세 종류 : 단일 스트링, 어레이, 대물
출력 박멸 입국 다를
[] 배열
메인 및 서브 메인 번들로 패키징
module.exports={
entry:[
'./src/script/main.js',
'./src/script/sub-main.js'
],
output:{
path:'./dist/js',
filename:'bundle.js'
},
}
[객체] - 다중 페이지 응용 프로그램의
메인 번들로 패키징
module.exports={
entry:{
page1:'./src/script/main.js',
page2:[
'./src/script/main.js',
'./src/script/sub-main.js'
],
},
output:{
path:'./dist/js',
//【占位符】hash本次 chunkhash静态资源改变后才变化
filename:'[name]-[hash]-[chunkhash].js'
},
}
사용 플러그인
HTML-wabpack - 플러그인
작업 :의 도입 동기 HTML JS chunkhash
//cli
npm install html-wabpack-plugin --save-dev
//webpack.config.js
var htmlWebpackPlugin=require('html-wabpack-plugin')
module.exports={
// 上下文的默认环境就是当前运行脚本的目录
// context:
entry:{
page1:'./src/script/main.js',
page2:[
'./src/script/main.js',
'./src/script/sub-main.js'
],
},
output:{
path:'./dist',
// js
filename:'js/[name]-[hash]-[chunkhash].js',
// 上线环境的
publicPath:'http://m.mi.com/'
},
// 所有plugin都输出到output.path
plugin:[
//初始化插件 并传入相关参数
new htmlWebpackPlugin({
// 上下文环境 以根目录html作为模板
template:'index.html',
filename:'index-[hash].html',
inject:'head',//不配置的话 默认放到body标签内
//向html里面传参,
//在html用<%= htmlWebpackPlugin.options.title %>接收
title:'haha',//date:new Date(),
//压缩html 删除注释和空格
minify:{
removeComments:true,
collapseWhitespace:true
}
});
]
}
<!-- index.html -->
<!-- 可以编写js的模板引擎<%= 赋值 %><% 执行 %> -->
<% for (var key in htmlWebpackPlugin.files) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>
<% for (var key in htmlWebpackPlugin.options) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>
<!-- 用处 -->
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry%>"></script>
이 문서는 재현 원숭이 2048➽ https://www.mk2048.com/blog/blog.php?id=hhabb0icbjb