vscode使用webpack打包
- 下载webpack
- 初始化项目
- 打包 .js文件
- 打包.js+.css
- webpack全局安装与局部安装
webpack作用就是将多个不同的.js文件或者.css文件打包为一个文件,减少请求量
有大佬的帖子写的很详细,各种资源的打包方式都有:
下载webpack
首先在项目路径的终端下载webpack两个插件,并全局部署
npm install -g webpack webpack-cli
还可以-v查看以下版本号
初始化项目
这里测试打包用的初始化项目为两个简单的方法,最后被main.js引用
common.js:
//直接在方法前面加上export关键字,相当于直接公开方法了
exports.info= function getList(str){
document.write(str) //在浏览器进行输出
}utils.js
exports.add=function (a,b){
return a+b;
}main.js
const common= require('./common')
const utils= require('./utiles')
common.info('hello'+utils.add(1,5))在初始化项目后的根目录下添加webpack.config.js配置文件:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/main.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
// 使用开发模式打包
mode:"development"
}npm安装时-S -D作用及区别:
-S 即--save（保存）
包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在
-D 即--dev（生产）
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel,sass-loader这些解析器
打包是在npm上运行命令, 一般来说你在配置完成 webpack.config.js 后,你打包时执行的命令是webpack ,但你也可以执行 npm run build 来进行打包,
如何实现: 在package.json中的scripts下多加一行 "build": "webpack" ,就可以使用 npm run build
他们的区别:
在终端直接执行webpack命令,使用的是全局安装的webpack,
当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack
运行命令
开发环境: webpack ./src/index.js -o ./build/build.js --mode=development
生产环境: webpack ./src/index.js -o ./build/build.js --mode=production
添加能使css一起打包的插件: npm i css-loader style-loader -D
添加能使scss一起打包的插件: npm install sass-loader node-sass webpack -D 因为你刚刚下载过 css-loader style-loader所以不用再次下载了
添加能使html一起打包的插件: npm i html-webpack-plugin -D
添加能使图片打包的插件: npm i url-loader file-loader -D
添加能使html中图片打包的插件: npm i html-loader -D
添加能使浏览器自动更新(刷新)的插件: npm i webpack-dev-server -D打包 .js文件
最后在在项目根目录中使用命令 webpack 直接打包即可,最后的文件树如下:
然后可以测试一下打包结果
根目录中创建一个01.html文件,然后引入打包后的.js文件:
<script src="./build/build.js"></script>最后打开看一下就好,out:hello6
打包.js+.css
webpack本身只能处理js模块,如果要处理其他类型的文件,就需要使用loader进行转化
Loader可以理解为模块和资源的转换器
首先需要安装loader插件,css-loader是将css装载到JavaScript,style-loader是将JavaScript识别css文件
npm i css-loader style-loader -D
然后创建一个.css文件,并引入到原本的main.js文件中
可以使用require(‘文件路径’)直接引入
接下来在原本的webpack.config.js配置文件中添加一部分内容,这里我直接写添加之后的配置文件整体了:
const path = require('path') // 引用path模块
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/main.js",
// 打包后的出口文件
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'build'),
// 输出的文件名称
filename:'build.js',
},
//包含css文件的打包
module:{
rules:[
{
test:/\.css$/,//打包规则应用到以.css结尾的文件上
use:['style-locader','css-loader']
}
]
},
// 使用开发模式打包
mode:"development"
}最后还是webpack一下:
webpack全局安装与局部安装
可以配置项目的npm运行命令,修改package.json文件,在scripts调试标签中添加"XXX": “webpack”,如下:
"scripts": {
"..."
"dev": "webpack"
},然后打包的时候直接输入npm run dev就自动执行了webpack
在终端直接执行webpack命令,使用的是全局安装的webpack,
当在package.js中定义了scripts时, 其包含了webpack命令,那么使用的是局部的webpack
为什么全局安装还要本地安装？
仅仅全局安装够吗？
1.在js实例代码中，默认下node.js会在NODE_PATH和目前js所在项目下的node_modules文件夹下去寻找模块，因此，如果只是全局安装，不能直接通过require()的方式去引用模块，需要手动解决包路径的配置问题，当然你也可以复制全局安装的node_modules文件夹到项目下，还有办法可以选择将环境变量的NODE_PATH设置为C:\Program Files\nodejs。
2.对于包的更新不好管理，可能你需要为每个包重新命名，如gulp@3.8.1、gulp@3.9.1…，为了区别不同项目使用指定的包，保证模块之间的相互依赖（这块下面会介绍），区别每个项目正常运行。
因此，不推荐只全局安装。
本地安装的重要性
最早的node.js/npm实际上是全局的，包括现在还兼容NODE_PATH，但是不能支持全局多版本，于是nodejs团队改成本地安装的方法可能就是为了保证不同版本包之间的相互依赖，什么意思呢，举个例子wpdemo组件中相互依赖的包就有很多个
其中依赖包的指定版本号如下，不可轻易去修改，因为不同版本包对应依赖包的版本的功能有所差别，如果修改指定的版本来运行wpdemo，就可能会编译出错等bug。
依赖
再举个例子：
包版本为：A(0.0.1)依赖B(0.0.2)，B(0.0.1)依赖C(0.0.3)
一段时间原作者更新后，
包版本为：A(1.0.1)依赖B（1.0.0），B(1.0.0)依赖C(1.0.0)
每一次的更新可能带来不一样的功能，在多人合作、发布模块到npmjs社区、上传到github给其他人使用时，保留模块的版本信息可用于下载指定的版本号显得特别重要。
本地安装可以让每个项目拥有独立的包，不受全局包的影响，方便项目的移动、复制、打包等，保证不同版本包之间的相互依赖，这些优点是全局安装难以做到的。
另外，据node团队介绍，本地安装包对于项目的加载会更快。
有优点也少不了缺点，如每次新项目都要本地安装所依赖的包，安装包时间相对较长，一来是包太大导致下载慢；二是浪费了硬盘空间，不过现在电脑硬盘动不动就几个T，你还会在意节省这点空间吗？
