webpack的理解与使用

本文介绍Webpack的基本使用方法,包括为何选择Webpack作为前端项目的构建工具,如何安装Webpack及其相关依赖,以及如何进行基本配置来实现诸如Babel实时编译、热更新等功能。

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

为什么要用webpack呢?
  因为webpack里面可以说一切都是模块 它对于目前最火的前端三大框架(vueJs angulaJs ReactJs)来说非常适合 与三大框架配合的非常完美
webpack的特点
1.babel实时编译
2.测试
3.热更新
4.可以自己搭建服务器
用来下载的东西的命令
  
  首先在此之前最好npm init 下载好工程文件
               1.npm install webpack -g     webpack的命令行
               2.npm install webpack-server  webpack自带的服务器 npm run dev启动
     各种依赖的库
               3.npm install babel-core -D babel核心
                    //转译ES6
               4.npm install babel-preset-es2015 -D
               5.npm install babel-loader -D babel加载器
               6.npm install webpack -D 本地的webpack
               7.npm install webpack-dev-server  本地的服务
               8.npm install babel-preset-react -D  转译react  JSX的
               9.npm install react-dom -D
              10.npm install style-loader -D
              11.npm css-loader -D
               .....
              12.npm install react-hot-loader -D
下载完后需要配置文件
webpack.config.js
                    entry:'主文件的名称' index.js(react)
                    output:{
                         path:_dirname
                    }

转载于:https://www.cnblogs.com/yeshenyang/p/webpack.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值