webpack介绍及基本使用

最新推荐文章于 2024-05-16 09:34:51 发布

無理:)

最新推荐文章于 2024-05-16 09:34:51 发布

阅读量169

点赞数 1

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_62810001/article/details/136184779

版权

webpack主要是一个打包工具

创建一个文件夹webpack,其中运行的入口文件就是index.js,通常我们把他写成src目录下的main.js
再src目录下在随意创建两个js文件,写一下简单逻辑

以下为两个js文件中的代码

export default function count(x, y) {
    return x -y;
}

export default function sum(...args) {
    return args.reduce((p,c) => p + c, 0);
}

然后在main.js中引入,并打印一下

import count from "./js/count";
import sum from "./js/sum";
console.log(sum(1,2,3,4));
console.log(count(3,2));

在webpack文件夹中创建一个pubilc目录,其中放一个index.html 充当我们的出口文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>hello webpack</h1>
    <script src="../src/main.js"></script>
</body>
</html>

然后运行一下此页面会有报错

此刻是正常现象,因为es6模块化在浏览器中不识别

这就需要打包之后变成浏览器能识别的语法

在webpack终端运行 npm init -y 此命令是初始化包文件
在执行一条指令 npm i webpack webpack-cli -D 下载webpack 文件目录中会出现node_modules
此刻可以执行两条命令进行开发模式打包和生产模式打包
开发模式 npx webpack ./src/main.js --mode-developent
如果命令报错就改成 npx webpack --mode development ./src/main.js
生产模式 npx webpack ./src/main.js --mode-production (打包后文件大小会极小缩成一行代码)
如果命令报错就改成 npx webpack --mode production ./src/main.js
此时打包完成,目录中出现dist文件夹,里面有一个main.js
index.html中代码路途替换一下,浏览器控制台就可以正常输出逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>hello webpack</h1>
    <script src="../dist/main.js"></script>
</body>
</html>