深入浅出webpack教程系列_安装与基本打包用法和命令参数详解


Posted in Javascript onSeptember 10, 2017

webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧.

第一步、安装webpack

新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-dev

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

第二步、全局安装webpack(3.5.6版本): npm install webpack@3.5.6 -g 安装完成之后用webpack -v 查看webpack的版本

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

第三步、新建一个index.js文件,输入一个函数,弹出一些信息,然后调用函数,最后用webpack 打包( webpack index.js index.bundle.js ):把index.js文件打包成index.bundle.js

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

就会在当前的目录下面生成index.bundle.js文件.

第四步、新建一个index.html文件,然后引入index.bundle.js 就能使用这个js文件了

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

第五步、把两个js文件一起打包合并

另外在当前目录下面新建一个calc.js文件,然后在用module.exports导出

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

然后在index.js文件中用var oCalc = require( './calc.js' )引入calc.js, 在调用函数oCalc.add( 10, 20 ), 那现在就有了两个函数在index.js中了, 再次执行命令

webpack index.js index.bundle.js, 合并打包之后, 重新刷新下index.html,是不是弹出了add函数的结果呢?

第六步、loader的使用

在当前目录下新建style.css文件,然后用require引入index.js文件中, 执行一次打包(webpack index.js index.bundle.js),这个时候会报错,报错信息显示为(你需要loader去处理css文件).

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

第七步、安装与使用loader

我们需要安装两个loader,css-loader,style-loader( 安装命令: npm install css-loader style-loader --save-dev ), 再用require加载

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

再次执行一次打包( webpack index.js index.bundle.js ),然后刷新index.html文件, 看看是否css文件中的body{ background: red } 生效了呢(浏览器body的背景变红)?

第八步、更详细的打包信息

webpack打包,后面可以跟很多参数,如:

--progress: 打包进度

--display-modules: 打包的模块

--colors: 是否彩色显示 打包提示信息

--display-reasons: 打包原因

--watch: 自动监控文件变化

等等,还有很多,可以参考官网

深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

后面还有插件,配置等等很多项目开发中的常见的知识额

以上这篇深入浅出webpack教程系列_安装与基本打包用法和命令参数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
vue实现购物车小案例
Sep 27 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
基于AngularJS的简单使用详解
Sep 10 #Javascript
JS获取字符对应的ASCII码实例
Sep 10 #Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 #Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 #Javascript
浅谈Express异步进化史
Sep 09 #Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
You might like
php实现用户注册密码的crypt加密
2017/06/08 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
前端微信支付js代码
2016/07/25 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
layui实现数据分页功能
2019/07/27 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python线程、进程和协程详解
2016/07/19 Python
Python变量和数据类型详解
2017/02/15 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django缓存Cache使用详解
2020/11/30 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
自我评价中英文语句
2013/11/30 职场文书
培训讲师邀请函
2014/01/10 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
工作检讨书500字
2014/10/19 职场文书
红色影片观后感
2015/06/18 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
高考升学宴主持词
2019/06/21 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python