深入浅出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 相关文章推荐
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue父子之间值传递的实例教程
Jul 02 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使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
python网络编程实例简析
2014/09/26 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python字符串循环左移
2019/03/08 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python实现无边框进度条的实例代码
2020/12/30 Python
《藏戏》教学反思
2014/02/11 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
置业顾问岗位职责
2014/03/02 职场文书
质量保证书范本
2014/04/29 职场文书
我的老师教学反思
2014/05/01 职场文书
写得不错的求职信范文
2014/07/11 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
营销经理工作检讨书
2014/11/03 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
销售员岗位职责
2015/02/10 职场文书
初中体育教学随笔
2015/08/15 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python