webpack 安装使用（1）

叁歲伎倆 2022-08-30 05:18 183阅读 0赞

## 安装 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

2.  安装webpack-cli：

cnpm install -D webpack-cli

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

传概念

# 使用 #

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

如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

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：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

public 文件夹下面生成bundle.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

浏览器打开index.html

![20210719144901495.png][]

希望对你有所帮助

原文地址：

[https://zhuanlan.zhihu.com/p/23538138][https_zhuanlan.zhihu.com_p_23538138]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/9798a34576e04ee7b4546268b4b99b82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/b88567cec68140cda7845339251a3830.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/c5a3c8e61aee4b94aa690525a35ebbf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/1a538d0745bf4dbb844e2d85db8fa629.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/e2a51692c3eb48dd94ba55f080eebb4d.png
[20210719144901495.png]: /images/20220829/cf40ddb9cfd748ce8e405e6eba656236.png
[https_zhuanlan.zhihu.com_p_23538138]: https://zhuanlan.zhihu.com/p/23538138