Webpack入门第一节

1.使用Webpack前需要做的准备

在新项目文件夹中新创建package.json,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务。(在终端可以使用npm init可以自动创建package.json)文件。

输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

对应生成的package.json文件

{
  "name": "pack",
  "version": "1.0.0",
  "description": "",
  "main": "app/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gx",
  "license": "ISC"
}

2.安装webpack

(1)在本项目中安装webpack作为依赖包。

npm install --save-dev webpack

(2)全局安装

npm install -g webpack

这里我选用的是在项目中安装即第一种方法。

回到项目根目录创建两个文件夹,app和public,app文件夹用来存放原始数据和我们将写的javaScript模块,public文件夹用来存放之后供浏览器读取的文件,

(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:

index.html --放在public文件夹中;

Greeter.js-- 放在app文件夹中;

main.js-- 放在app文件夹中;

项目结构如图所示:

index.html中文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

 我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

使用webpack命令打包,基本使用方法如下:

webpack {entry file} {destination for bundled file}

 指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中输入如下命令

node_modules\.bin\webpack app\main.js --output public\bundle.js

命令用的不对,应该加上--output表明public\bundle.js输出文件。

打开index.html页面我们可以看到,在Greeter.js中输入的内容Hi there and greetings!

此时我们已经成功的使用Webpack打包了一个文件了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack是一个主流的前端工程化解决方案,用于打包和构建前端应用程序。它可以将多个模块和资源打包成一个或多个bundle,以便在浏览器中加载。 要使用Webpack,你可以通过安装webpack命令行工具和配置文件来开始使用。在开发环境中,可以使用cheap-module-eval-source-map配置选项来生成源映射,而在生产环境中,可以使用none选项来关闭源映射。 为了更方便地使用Webpack,你可以安装和配置一些第三方插件。其中两个常用的插件是webpack-dev-server和html-webpack-plugin。webpack-dev-server可以在代码修改后自动进行打包和构建,而html-webpack-plugin可以自定义index.html页面的内容。 如果想快速入门Webpack,你可以按照以下步骤进行操作: 1. 安装Webpackwebpack命令行工具。 2. 在项目根目录下创建一个webpack.config.js文件,并配置Webpack的入口和出口文件以及其他需要的选项。 3. 在package.json中的scripts字段中增加命令,例如"build": "webpack"。 4. 运行npm run build命令,即可实现打包。 这样,你就可以通过Webpack来打包和构建你的前端应用程序了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [超详细 WebPack 入门教程](https://blog.csdn.net/qq_43682422/article/details/124054740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [webpack快速入门教程](https://blog.csdn.net/weixin_57218747/article/details/117304221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值