最近在学习webpack第四个版本，相比大改版肯定有诸多不同，这边进行重新学习顺便排排BUG
安装过程中难免有点慢，但是npm是慢 cnpm又可能出错
npm install -g chajian --registry=http://registry.npm.taobao.org 推荐此方法安装
npm init -y 初始化
npm install -D webpack webpack-cli --registry=http://registry.npm.taobao.org 4版本要求安装webpack-cli 我们一步到位
安装好之后可以通过 webpack -v 查看版本号
创建webpack.config.js配置文件
大家可以根据我的目录进行测试webpack，也可以自行配置
index.js 注意js引入 此处是未生成的 待会我将要生成的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
entry.js写的简单一点 就一句代码
document.getElementById('title').innerHTML='Hello Webpack';
配置webpack.config.js 这个大家可能有点陌生 ,介绍一下基本配置
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
这里我用了3版本的配置 后续会跟进
来配置一下初步打包转换
entry选项（入口配置）
这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS…..）。这里要填写的是src目录下的entry.js文件。
output选项（出口配置）
出口配置是用来告诉webpack最后打包文件的地址和文件名称的，根据我们的配置应该打包到dist目录下
module.exports={
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
webpack 打包的命令很简单 就是webpack 接下来我们来打包一下
很显然我们失败了 这里有个错误就是 path is not defined 我们这边需要引入一下path
const path = require('path') =>在头部 引入path
module.exports={
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
好 我们再webpack一下 此时我们将会成功
dist目录下自动生成了bundle.js 文件 你可以打开看一下啊 根本看不懂 这是打包之后的文件，但是我们打开浏览器运行html的时候，里面会出现内容，就说明这个js是可以使用的
此时我们删掉生成的js 配置一下mode属性
const path = require('path')
module.exports={
mode: 'development', =>默认配置是 ‘production（生产环境）’
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js'
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
此时我们再webpack 一下 可以做个对比 有什么不同（此处不演示）
给大家介绍一下配置中的 _dirname
其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径 我给大家演示一下
在dist下新建dirname.js文件 代码如下
const path =require('path')
console.log(path.resolve(__dirname,'dist'))
然后我们在下面输入命令 cd dist 然后 node dirname.js
可以看到输出来的 是dist的路径
到这里就是webpack最基本的配置了，希望小伙伴多练练，不练也多看看
多入口、多出口配置
在src下新建一个js 内容随意 删除dist目录下的所有js
const path = require('path')
module.exports={
mode: 'development',
//入口文件的配置项
entry:{
//里面的entery是可以随便写的
entry:'./src/entry.js',
=>这里我们又引入了一个入口文件
entry2:'./src/entry2.js'
},
//出口文件的配置项
output:{
//打包的路径文职
path:path.resolve(__dirname,'dist'),
//打包的文件名称
filename:'[name].js' =>注意此处 使用[name].js 表示打包出的文件名与进入名相同
=>也就是即将打包出 entry.js 与entry2.js 在dist下
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
改动一下index中的引入文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./entry.js"></script> 引入发生了改变
<script src="./entry2.js"></script>
</body>
</html
接下来webpack打包一下
此时dist下已生成了js文件两个 说明我们成功了
网友评论