Webpack安装及使用

原创于 2019-04-19 21:02:06 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack的使用 #webpack的安装 #webpack的简单介绍

web前端同时被 2 个专栏收录

2 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文详细介绍如何使用Webpack进行项目模块化打包，包括环境搭建、安装步骤及Webpack的工作原理。通过分析项目结构，Webpack能将各种模块及其依赖打包成浏览器可识别的JavaScript文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack环境 node环境

  安装webpack
            1,npm install webpack  -g建议使用镜像安装 cnpm （cnpm安装可以看我其他博文）
            2,npm install webpack-cli -g
            3,进入你要打包的项目目录局部安装
                3.1   npm install webpack --save-dev
                3.2   npm install webpack-cli --save-dev
   webpack 安装完成

解释

 webpack做了什么？（模块化解决方案）

WebPack可以看做是模块打包机：它做的事情是，分析你的整个项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
基于node的modules开发cli可以做到开发完全模块化无论是组件复用还是css导入只对当前模块的开发有效
所以webpack打包项目所有静态资源（模块与模块的依赖）生成浏览器可识别的JavaScript文件