目录
(2)创建一个名为modules的目录,用于放置JS模块等资源文件
(4)在modules下创建一个名为main.js的入口文件main.js,用于打包时设置entry属性
(5)在项目目录下创建webpack.config.js配置文件,使用webpack命令打包
(7)在项目目录下创建HTML页面,如index.html,导入webpack打包后的JS文件
1、安装Webpack
WebPack是一款模块加载器兼打包工具, 它能把各种资源, 如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用
安装:
npm install webpack -g
npm install webpack-cli -g
测试安装成功:
webpack -v
webpack-cli -v
配置:
- entry:入口文件, 指定Web Pack用哪个文件作为项目的入口
- output:输出, 指定WebPack把处理完成的文件放置到指定路径
- module:模块, 用于处理各种类型的文件
- plugins:插件, 如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听, 用于设置文件改动后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true
}
直接运行webpack
命令打包
2、使用webpack
(1)创建项目
在2021学习中创建文件夹webpack-study,然后用IDEA打开
(2)创建一个名为modules的目录,用于放置JS模块等资源文件
(3)在modules下创建模块文件hello.js
//暴露一个方法
exports.sayHi = function () {
//输出:山姆看英语
document.write("<h1>山姆看英语1</h1>")
};
exports.sayHi1 = function () {
//输出:山姆看英语2
document.write("<h1>山姆看英语2</h1>")
};
exports.sayHi2 = function () {
//输出:山姆看英语3
document.write("<h1>山姆看英语3</h1>")
};
exports.sayHi3 = function () {
//输出:山姆看英语4
document.write("<h1>山姆看英语4</h1>")
};
exports.sayHi4 = function () {
//输出:山姆看英语5
document.write("<h1>山姆看英语5</h1>")
};
(4)在modules下创建一个名为main.js的入口文件main.js,用于打包时设置entry属性
//引入hello.js
let hello = require("./hello");
hello.sayHi();
(5)在项目目录下创建webpack.config.js配置文件,使用webpack命令打包
module.exports = {
//entry:这个就是程序的入口
entry: './modules/main.js',
//输出
output: {
filename: "./js/bundle.js"
}
};
(6)打包
说明:打包如果失败,就用管理员权限运行webpack
(7)在项目目录下创建HTML页面,如index.html,导入webpack打包后的JS文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Java</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
(8)直接打开index.html就能输出结果!
注:
# 参数--watch 用于监听变化,如果要打包的东西有变化,就重新打包
webpack --watch