深入浅出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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
javascript实现行拖动的方法
May 27 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
浅谈mint-ui 填坑之路
Nov 06 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 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中常用的数组操作方法笔记整理
2016/05/16 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
关键字final的用法
2013/10/02 面试题
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
党校学习心得体会范文
2014/09/09 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年化验室工作总结
2015/04/23 职场文书
redis实现排行榜功能
2021/05/24 Redis