webpack 项目使用--创建webpack 项目(1) 喜欢ヅ旅行 2022-09-03 05:19 182阅读 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
还没有评论,来说两句吧...