前端模块化之webpack的初识与使用
原创
1 前言
大家好，今天我来和大家一起来了解前端模块化工具webpack的知识，如有疑问和错误，欢迎指正，一起交流探讨哈！
2 webpack的作用
项目源代码之间存在依赖关系，通过webpack打包它的入口文件，就可以完成后续代码的打包，最终形式可以线上部署的代码，这就是webpack的优势所在
3 webpack的优点
- 代码拆分
- Loader
- 智能解析
- 插件系统
- 快速运行
4 webpack的实战
- 安装webpack webpack-cli这两个全局包
npm i webpack webpack-cli -g- 查看是否安装webpack，webpack-cli是否成功
webpack -v
webpack-cli -v- 安装成功后就可以对项目代码进行打包
- 新建一个文件夹存放项目文件，这里我取名为 entry.js
document.write("I am quanzhanjiajia")- 打开文件所在路径，cmd打开终端,webpack+入口文件名 -o 输出的文件夹名，存放打包后的js文件 --mode=development(开发者模式)或者使用production(生产模式)，两种模式的区别在于会不会被压缩，development模式不会被压缩
webpack ./entry.js -o bundle --mode=development- 接着新建一个index.html文件，引入打包后的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="bundle.js/main.js"></script>
</body>
</html>运行后可以看到
- 一个大型的项目文件，每个文件之间都存在相互的依赖关系，我们可以通过把所有需要打包的模块文件引入到入口文件中，这样我们就可以通过打包入口文件，完成项目的打包
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))- 再次执行打包命令
webpack ./entry.js -o bundle --mode=development可以看到
- 我们知道webpack非常强大，除了可以打包js文件，还可以打包其他各种类型的文件
- 那么来试试打包css文件吧
- 新建css文件
body{
background-color: red;
}- 首先生成一个package.json文件
npm init -y- 安装style-loader css-loader
npm i style-loader css-loader -D入口文件中导入css模块
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))
//导入css模块
require('!style-loader!css-loader!./site.css')再次打包
webpack ./entry.js -o bundle --mode=development可以看到页面发生变换，css样式生效
- 下面介绍另一种打包css文件的方式
- 修改入口文件导入css文件
document.write("I am quanzhanjiajia<br>")
//在入口文件中导入module模块
document.write(require('./module.js'))
//导入css模块
//require('!style-loader!css-loader!./site.css')
//导入css模块的另一种方式
require('./site.css')- 新建webpack.config.js配置文件
module.exports ={
mode:'development',
entry:'./entry.js',
output:{
path:__dirname,
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}- 在终端直接输入webpack
webpack- 查看效果
- 查看打包的进度
webpack --progress如果不是默认的webpack.config.js文件，而是叫webpack.config.dev.js,这时，我们可以指定配置文件
webpack ./entry.js -o bundle --config webpack.config.dev.js- 可以看到同样可以打包成功
5 总结
通过上面，我们大致学习了webpack的基本使用方法，随着webpack技术不断得更新迭代，我们在网上可能会看得很多webpack相关的技术，但是其实有些版本早已过时，学习webpack还是要去官方文档学习，保证技术不落后！
如果觉得我的文章写得不错，欢迎关注，点赞，在看，分享，收藏！爱你么么哒
欢迎各位读者，大佬，和我一起学习交流！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录