webpack打包工具的初级使用方法

本文介绍Webpack 3.8.1版本的初级使用方法,包括下载、配置及常见问题解析。详细讲解了如何通过npm安装、配置webpack.config.js文件、使用热加载以及打包JS和CSS文件的流程。

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

 

这里下载的是webpack的3.8.1版本(新版更新的使用有些问题)

 

什么是webpack?

他是一个前端资源加载或打包工具,. 资源: img css json等.

下载的话 用 npm webpack@3.8.1 --save-dev 局部下载(下载的是开发版本)

第二步(这里说下打包JS吧)

打包JS文件

  指令 webpack  入口文件  出口文件     例:  webpack a.js  bundle.js

  这里的指令是可以有缩写的写法就是一个单纯的 webpack 的英文, 但是这种写法得配置一个 webpack.config.js的文件

这个是webpack的配置文件中的内容  下面的 module的对象是为了配置css 或者 json等其他的模块.

 

在配置好了文件之后  有一个可以让他自己自动刷新的server 叫 "热加载"

下载的话 得下载比 webpack版本低的版本哦,  因为下载高的话会有不兼容等其他的小问题

webpack-dev-serve@2.9.4 用这个版本

全局下载的命令为  npm install -g webpack-sev-serve@2.9.4

下载之后 在开发环境中下载 npm i --save-dev webpack-dev-server@2.9.4 这个版本

下载好了之后 就可以直接使用 webpack-dev-server启动就好了

还有一种启动方式是 webpack-dev-server --hot --inline

 

在package.json 中 把script里面的 东西添加 或者换成这些东西  

就可以使用   简写了   npm run dev

这种写法在工作之后使用的是最多的一种

 

这里要注意一些问题

 

在这个服务器下生成的虚拟 bundle.js 是由配置文件决定的. 但是他是和app.html同级目录关系. 所以引入关系需要注意

 

 

打包CSS(这里是题外话)

在打包 css文件中 要使用依赖包 

loader : 依赖包

css转化成 js less转成js

json  转成 png 传成 js  而 loader 就是解决这解决这些问题的

 

CSS文件打包到 js 中 需要 css-loader 和 style-loader这两个依赖包

 

posted on 2019-06-04 17:05  blankOne 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/blankOne/p/10974646.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值