概述
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
安装webpack 核心库
全局安装
npm install webpack -g
针对项目目录，局部安装，添加到依赖
npm install webpack -D
关于模式
--save -d 等同于 -D
代表生产依赖（会被注入package.json中的devDependencies里面），无需要打入最终包
--save 等同于 -S
代表开发依赖（会被注入package.json中的dependencies里面），需要被一起打包
【注】：
局部安装package.json中name不能为webapck，否则报错
webpack名称冲突
查看webpack版本
webpack -v
如果碰到报错情况，因为这是调用指令，需要cli脚手架，需要单独安装，会提示
脚手架没安装
输入 yes 回车，即可安装
或者输入no，退出进行单独安装，
单独 全局安装webpack-cli 脚手架
npm install webpack-cli -g
查看webpack-cli版本
webpack-cli -v
常用功能：
1.通过打包工具，我们可以使得浏览器支持模块化语法
2.图片压缩
3.样式兼容，ES6兼容
4.热更新
//------------------------例：
- 单入口 ( 一个js输出结果 )
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack打包</title>
</head>
<body>
<div class="main">
<div class="box" id="btn1">点击我</div>
</div>
</body>
<script type="text/javascript" src="build/bundle.min.js"></script>
</html>
./src/js/index.js
import son from './son/common.js'
son();
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
var _tar = this;
if(!oBtn.hasClick){
_tar.innerHTML = '我被点击了'
_tar.hasClick = true;
_tar.style.backgroundColor = '#ff0';
}else{
_tar.innerHTML = '再来点击我'
_tar.hasClick = false;
_tar.style.backgroundColor = '#f60';
}
}
./src/js/son/common.js
module.exports = ()=>{
var num = 0;
document.onclick = function(ev){
var oEv = ev || window.event;
num++;
document.title = num;
oEv.cancelBubble = true;
}
}
./webpack.config.js
let path = require('path');
module.exports={
mode:'development',
entry:['./src/js/index.js'],
output:{
path:path.resolve(__dirname,'build'),
filename:'bundle.min.js'
}
}
./src/css/common.css
body,html { margin:0;}
.main { width: 640px; margin: 0 auto;
transform: skew(25deg);
}
.box { width: 100px; height: 100px; margin:100px auto 0; background: #f60; line-height: 100px; text-align: center; font-size:14px; }
body { background:url(../img/111.jpg) no-repeat 0 0; }
针对多个js文件的打包，输出多个文件的情况
- 多入口 ( 多个js输出结果 )
./webpack.config.js
let path = require('path');
module.exports={
mode:'development',
entry:{
index:'./src/js/index.js',
common:'./src/js/son/common.js'
},
output:{
path:path.resolve(__dirname,'build'),
filename:'[name].min.js'
}
}
打包结果:
build/index.min.js
build/common.min.js
//---------------------------------------以上的打包都是针对JS文件
loader工具的使用
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，
然后你就可以利用 webpack 的打包能力，对它们进行处理。
兼容ES6
安装：
npm install babel-loader @babel/core @babel/preset-env -D
语法格式：
rules:[
{
test:/\.jsx?/i,
exclude:/node_modules/, //如果引入了node_modules中的包，不要编译
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
}
]
查看JS压缩前报错位置
无需安装，在entry,mode,output,module同级加一个devtool即可
谷歌浏览器，火狐浏览器均可（gulp的sourcemap 在火狐下不好用）
devtool:'source-map'
报错位置
js压缩 (生产模式下有效)
安装：
npm install uglifyjs-webpack-plugin -D
使用：
...
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
optimization: {
minimizer: [
new UglifyJsPlugin({
test: /\.jsx?$/i
})
],
}
...
注意事项：uglifyjs-webpack-plugin需要babel模块支持
css2.0文件打包
安装：
npm install style-loader css-loader -D
语法：
module:{
rules:[
{ test:/\.css$/, use:['style-loader','css-loader']}
]
}
值得注意的是：依赖包存在先后的执行顺序:
css-loader : 加载CSS文件
style-loader : 将css内容输出到页面
打包后，css外链样式会被读取，然后通过JS语言插入到html页面中，如图：
将引入的css模块插入到页面
上面的操作是针对css2.0的情况，如果对css3应该怎么处理呢
css3.0 兼容
安装：
npm install postcss-loader autoprefixer -D
同级目录增加 postcss.config.js
作为css3的打包规则文件
值得注意 postcss.config.js 中可以根据浏览器的使用比例，增加兼容前缀数量 (如webkit、ms、moz、o等)
module.exports={
plugins:[
require('autoprefixer')
]
}
语法格式：
module:{
rules:[
{ test:/\.css$/, use:['style-loader','css-loader','postcss-loader']}
]
}
【注】：
再次注意执行顺序 'style-loader','css-loader','postcss-loader' 自右至左
postcss-loader ：兼容处理css3
css-loader：读取文件
style-loader：将样式插入到页面
针对富媒体的处理
安装：
npm install file-loader -D
语法格式：
module:{
rules:[
{
test:/\.(jpg|png|gif)$/i,
use:{
loader:'file-loader',
options:{
outputPath:'images/' //指定图片输出路径
}
}
}
]
}
富媒体打包
针对碎片化图片
如果要对体积很小的图片打包，可以将其处理成base64
安装：
cnpm install url-loader -D
【注】：url-loader不能单独使用，其内部依赖模块file-loader
语法格式：
module:{
rules:[
{test:/\.(jpg|png|gif)$/i,use:{
loader:'url-loader',
options:{
outputPath:'image/',
limit:10*1024 //单位字节，例：10kb -- 一般32
}
}
}
]
}
将大于10kb的处理为图片，小于10kb的处理为base64
特殊处理
针对预编译less
安装：
npm install less-loader less -D
语法格式：
module:{
rules:[
{ test:/\.less$/i, use:['style-loader','css-loader','less-loader']}
]
}
eslint
校验代码格式
安装：
npm install eslint eslint-loader -D
语法格式：
rules:[
{
test:/\.js$/i,
loader:'eslint-loader',
exclude:/node_modules/, //排除依赖库
options:{
}
}
]
添加eslint配置文件 .eslintrc
{
"parserOptions": {
"ecmaVersion": 6, //版本
"sourceType": "module", //资源：模块
"ecmaFeatures": {
"jsx": true //兼容jsx
}
},
"rules": {
"indent":["error",2], //缩进2个空格
"linebreak-style":["error","windows"], //换行风格
"quotes":["error","double"], //单双引号
"semi": ["error","always"] //结尾分号
}
}
报错信息
//-------------------------- 单元测试
jest
安装
npm install jest jest-webpack -D
语法格式：
在项目根下，新增tests文件夹，内部增加测试JS文件
引入被测试模块
test('任务名',()=>{
expect(cbfn.addfn(1,2)).toBe(3); //cbfn.addfn(1,2)是被测试模块的方法
})
expect(测试语法).toBe(预期值);
单元始终没有跑通
报错
Error: Cannot find module 'webpack/bin/config-yargs
查询可能是webpack与webpack-dev-server版本有冲突造成
删除原包，降级成了网友的版本
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
继续报错，错误变为“：
Error: Cannot find module 'jest-cli/build/SearchSource'
安装了jest-cli 然而问题依然存在.......
//-------------------------- 热更新
dev-server
安装：
npm install webpack webpack-cli webpack-dev-server -D
热更新服务器启动必须要依靠webpack-cli的指令：
2-1:定义指令
定义指令
2-2:启动指令(针对上图)
npm run web
访问：
访问地址会显示在终端命令中，如：http://localhost:8080/
打开浏览器访问你的页面
http://localhost:8080/index.html
值得注意的是，热更新针对打包文件的修改，为了提高性能，并不会真正改变磁盘中的文件，而是在内存中生效
另外打包后的文件路径需要修改
针对本例：
根下的 index.html引入js地址：
build/bundle.min.js 改为 bundle.min.js
只要这个路径修改了，其内部css,img,js等会自动对应，不用调整路径；
感觉像是在服务器根下，镜像了一个bundle.min.js，挂载缓存中
另外，调试完毕后，记得再次webpack下，将文件真正修改到磁盘中的文件内
网友评论