webpack 安装使用（1）

最新推荐文章于 2022-11-01 10:02:29 发布

我是大头鸟

最新推荐文章于 2022-11-01 10:02:29 发布

阅读量170

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/datouniao1/article/details/118894837

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何安装和使用webpack，包括全局安装命令、生成package.json、创建项目目录结构、编写js文件、配置webpack.config.js，以及执行webpack命令打包生成bundle.js。通过实例展示了webpack的基本用法。

摘要由CSDN通过智能技术生成

安装

1. 全局安装命令：cnpm install weback -g

2. 安装webpack-cli：

cnpm install -D webpack-cli

webpack-cli 是用来在控制台运行webpack命令的工具

传概念

使用

新建demo01 文件夹，并在该文件文件夹下面创建app和public两个文件夹，和webpack.config.js

如下：

2.生成package.json文件：cmd 进入到demo01文件夹

执行：cnpm init，回答一些问题之后

生成package.json 这个是一个最为进本的文件

app 文件夹下面创建两个js文件，分别为entry.js 和greet.js

greet.js

function greet(){
	var divEle=document.createElement("div");
	divEle.innerHTML="hello,webpack";
    return divEle;
}
module.exports=greet;

entry.js

var greet=require("./greet.js");
document.getElementById("container").appendChild(greet());

public 文件夹下面创建index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div id="container"></div>
  <script type="text/javascript" rel="stylesheet" src="./bundle.js"></script>
 </body>
</html>

webpack.config.js 文件内容如下：

module.exports={
	entry:__dirname+"/app/entry.js",   //入口文件
	output:{                           
		path:__dirname+"/public",      //输出文件的存放位置
		filename:"bundle.js"           //输出文件的名称
	} 
}

执行webpack：

public 文件夹下面生成bundle.js

浏览器打开index.html

希望对你有所帮助

原文地址：

https://zhuanlan.zhihu.com/p/23538138

我是大头鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 安装使用（1）

安装1. 全局安装命令：cnpm install weback -g2. 安装webpack-cli：cnpm install -D webpack-cliwebpack-cli 是用来在控制台运行webpack命令的工具传概念使用新建demo01 文件夹，并在该文件文件夹下面创建app和public两个文件夹，和webpack.config.js如下：2.生成package.json文件：cmd 进入到demo01文件夹执行：cnpm init，回答一些..
复制链接

扫一扫

专栏目录