大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
没有配置文件的打包
如果我们没有使用配置文件webpack.config.js
,那么我们就需要通过命令来打包
案例
我们首先创建一个webpackTest
文件夹,然后在文件夹中再创建2个子文件夹dist
和src
- dist:打包后的文件夹
- src:源代码文件夹
接着在src
文件夹中创建4个文件,分别是info.js
、main.js
、mathUtils.js
、index.html
info
和mathUtils
是模块化的js文件,main
是主入口,index
是首页,整体项目结构如下
代码内容如下:
// info.js
const height = 180;
const weight = 180
export {height, weight}
// mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add, mul
}
//main.js
// 1.CommonJS模块化
const {add, mul} = require('./mathUtils')
console.log(add(20, 30))
console.log(mul(50, 80))
// 2.es6模块化
import {height, weight} from "./info";
console.log(height)
console.log(weight)
最后我们来到webpackTest
目录下,输入以下命令:
webpack ./src/main.js -o ./dist/bundle.js --mode development
./src/main.js
:需要打包的文件路径./dist/bundle.js
:需要打包到哪个文件夹下--mode development
:打包的模式是开发者环境
结果如下
我们会发现webpack
会将打包的文件放到了我们指定的dist
目录下
最后只需要在index.html
中引入打包后的main.js
即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/bundle.js/main.js"></script>
</body>
</html>
我们访问index
首页,查看控制台,就能看到我们源代码main.js
中写的打印日志了
说明使用webpack
打包成功了
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165733.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...