webpack 项目使用--创建webpack 项目（1）

喜欢ヅ旅行 2022-09-03 05:19 221阅读 0赞

1.新建一个文件夹 假设文件夹的名称为 wdgapp，并且通过命令行到该目录下

![20210805204946585.png][]

2. 初始化项目

npm init -y

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

3.在wdgapp 文件夹中创建src 文件夹（源代码） 和dist（编译生成文件）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

并且在src文件夹中新建index.html 文件和 index.js 文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

编辑index.html:

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <<title>hello</title>
        </head>
        <body>
           <h1>Hello World</h1>
        </body>
    </html>

编辑index.js文件：

console.log("ok")

4. 安装webpack  和webpack-cli

执行：cnpm i webpack -g

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

执行：cnpm i webpack-cli -g

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

5. 创建webpack.config.js文件  （ webpack 的配置文件）

module.exports={}

6 执行webpack 命令，打包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

上面这个提示表示我们需要配置当前的编译环境 mode的值 有development和production

因为我们是开发测试所有可以设置为：development

在webpack.config.js 中：

module.exports={
        mode:'development'
    }

重新打包：

![20210805211218507.png][]

打包成功

这样在dist 文件夹中生成main.js 文件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

我们在index.html 页面中引入main.js

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>hello</title>
            <script src="../dist/main.js" type="text/javascript"></script>
        </head>
        <body>
           <h1>Hello World</h1>
        </body>
    </html>

然后使用浏览器打开index.html页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7][]

上面就是我们使用创建一个webpack 项目的过程

需要注意的几点：

1. 编译生成的目标文件夹 为dist

2. 从webpack4.x开始默认的入口文件为 src---->index.js

希望对你有所帮助

[20210805204946585.png]: /images/20220829/4bc393781cac49e3b72618117afaa038.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20220829/fac3c22c289f4a76bd44c1cf96a655bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20220829/4c3b2f26e86f43eca6f44ef74ef6e346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20220829/c018c277ed784fe48c4033fa690a6e01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: /images/20220829/b8af98a7876847f0ba3faf044505eb55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: /images/20220829/ac2c3eb7c08a4448b7661c9d4f9d1c3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: /images/20220829/7aa230bc08df409d8459b4791b4be326.png
[20210805211218507.png]: /images/20220829/90e04c3983dd40bd93ce4c217b033ccf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: /images/20220829/36a889b3961847f29f7db8083e41d92a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7]: /images/20220829/cf6bb7b9ff84439f92165440351646e6.png