Webpack快速入门
程序员文章站
2022-06-28 17:29:42
目录一. 什么是Webpack二. Webpack安装三. 案例：JS打包1. 创建nodejs项目2. 编写js文件3. 编写webpack.config.js4. 打包四. 案例：JS合并CSS1. 安装style-loader和css-loader2. 修改webpack.config.js3. 编写css文件4. 修改main.js5、打包6、打开浏览器测试一. 什么是Webpack官网中文文档：https://webpack.docschina.org/Webpack 是一个前端资源加载/...
目录
一. 什么是Webpack
官网中文文档：https://webpack.docschina.org/
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
二. Webpack安装
# 全局安装
npm install -g webpack webpack-cli
# 查看是否安装成功
webpack -v
三. 案例：JS打包
1. 创建nodejs项目
npm init -y
2. 编写js文件
out.js
exports.out = function (str) {
console.log(str);
document.write(str);
}
add.js
exports.add = function (a, b) {
return a + b;
}
创建main.js：入口文件，引入上述js文件
//导入out.js
const out = require("./out.js");
//导入add.js
const add = require("./add.js");
out.out("hello" + add.add(1, 1));
3. 编写webpack.config.js
在项目目录下创建配置文件webpack.config.js，用来配置打包
//导入path模块,Node.js内置模块
const path = require("path");
//定义JS打包规则
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径
filename: 'bundle.js' //输出文件名称
}
}
4. 打包
然后执行webpack打包命令，webpack -h可以查看所有后缀命令
然后在生成的dist目录下创建index.html，引用bundle.js进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
然后打开浏览器测试，成功！
四. 案例：JS合并CSS
1. 安装style-loader和css-loader
首先我们需要安装相关Loader插件
-
css-loader是将 css 装载到 javascript -
style-loader是让 javascript 认识 css
npm install --save-dev style-loader css-loader
2. 修改webpack.config.js
//导入path模块,Node.js内置模块
const path = require("path");
//定义JS打包规则
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径
filename: 'bundle.js' //输出文件名称
},
module: {
rules:[{
test:/\.css$/, //把项目中所有.css结尾的文件进行打包
use:["style-loader","css-loader"]
}]
}
}
3. 编写css文件
body {
background-color: yellow;
}
4. 修改main.js
修改main.js入口文件，引入style.css
//导入out.js
const out = require("./out.js");
//导入add.js
const add = require("./add.js");
//导入style.css
require("./style.css")
out.out("hello" + add.add(1, 1));
5、打包
打开cmd重新输入webpack命令进行打包
webpack
- 注意：如果配置文件名不是
webpack.config.js，则需要通过webpack -config 配置文件名来指定配置文件
6、打开浏览器测试
可以看到背景都变成蓝色
我们可以查看网页源码，打开bundle.js查看
可以看到webpack将js和css统一打包合成一个js文件，是一个合并并加密的文件，因此webpack为安全性有了很好的保证
本文地址：https://blog.csdn.net/qq_45173404/article/details/114260830