webpack本地安装和使用：实现一个简单的工程的打包

最新推荐文章于 2023-06-02 10:29:41 发布

Seven_5477

最新推荐文章于 2023-06-02 10:29:41 发布

阅读量1.2k

点赞数 2

分类专栏： Vue 文章标签： webpack javascript vue

本文链接：https://blog.csdn.net/m0_37922443/article/details/116896293

版权

Vue 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一、安装
1.创建一个工程文件夹，内容暂时为空
在这里插入图片描述

进入文件夹并执行命令

npm init -y

在这里插入图片描述
3. 本地安装 webpack，安装最新版本

npm install --save-dev webpack

在这里插入图片描述
4. 如果使用 webpack 4+ 版本，还需要安装 cli，webpack-cli 可以帮助我们在命令行里使用npx，webpack等相关指令。

npm install --save-dev webpack-cli
npx webpack -v  // 检测webpack是否安装成功

在这里插入图片描述
完成安装后的文件夹的状态：

二、使用
1、新建一个名为webpack.config.js的文件，用来配置工程的输入输出文件路径，不用再手动设置。
在当前目录新建webpack.config.js文件，并配置入口和出口：

const path = require('path');

module.exports = {
    entry: "./src/index.js", //入口路径
    output: { //出口路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

在这里插入图片描述
2、 根据webpack.config.js配置的路径将工程的代码放入对应的位置。
（1）index.html是主html文件。
（2）src/index.js是index.html引用的js文件，其他js文件可以在index.js文件引入。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>

<body>
    <script src="index.js"></script>
</body>

</html>

index.js

// ES6Module规范（引入必须放在第一行）
import {
    es6ModuleFn
} from './nav';

es6ModuleFn();

nav.js

function es6ModuleFn() {
    console.log("es6ModuleFn执行");
}

export {
    es6ModuleFn
};

3、配置package.json来执行webpack
在这里插入图片描述
4、执行如下命令，相当于直接运行webpack（或者npx webpack）命令，此时就会使用webpack进行打包，会在当前项目下生成一个dist文件夹

npm run build

在这里插入图片描述
5、此时把index.html中引入index.js的代码改为对应的dist的js文件：

<script src="index.js"></script>

改为：

<script src="/dist/bundle.js"></script>

6、运行index.html，可以看到函数的调用：
在这里插入图片描述

Seven_5477

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
webpack本地安装和使用：实现一个简单的工程的打包

一、安装1.创建一个工程文件夹，内容暂时为空2. 进入文件夹并执行命令npm init -y3. 本地安装 webpack，安装最新版本npm install --save-dev webpack4. 如果使用 webpack 4+ 版本，还需要安装 cli，webpack-cli 可以帮助我们在命令行里使用npx，webpack等相关指令。npm install --save-dev webpack-clinpx webpack -v // 检测webpack是否安装成功
复制链接

扫一扫