webpack安装

小咪咪 2024-04-17 05:58 32阅读 0赞

一、什么是webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 webpack 的核心是 依赖分析,把依赖分析出来了，其他都是细枝末节了

二、安装webpack

注意：需提前安装node和npm！！！

1.全局安装：

npm install webpack -g

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70][]

个人觉得最好在你的项目中也包含一份独立的 Webpack，这样你更方便管理你的项目

2.通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

npm install webpack --save-dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 1][]

3.检查webpack版本：

npm info webpack

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 2][]

4.如果需要使用 Webpack 开发工具，要单独安装：

npm install webpack-dev-server --save-dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8853900571dd4feca9d5c6a5a0d58cab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/92237f5645f7432d8343e5043d8a8ce2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8d7ef18020dc4ae7941d2e66b7988246.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5nbGlhbmc2NjY_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f76cb711a8e14e768cd70776e3fb131d.png