三种Webpack打包方式(小结)


Posted in Javascript onSeptember 19, 2018

准备工作

mkdir webpack_demo && cd webpack_demo  #新建文件夹
npm init  #创建package.json文件
npm install --save-dev webpack #安装依赖(非全局安装)
mkdir app && mkdir public  #新建app和public文件夹
cd app && cd.>Greeter.js && cd.>main.js #app文件夹中创建Greeter.js和main.js
cd .. && cd public && cd.>index.html  #public文件夹中创建index.html

index.html写入如下内容:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
    <title>Webpack Demo</title>
  </head>
<body>
  <div id='root'> </div> 
<script src="bundle.js"></script> 
</body> 
</html>

Greeter.js写入如下内容:

// Greeter.js
 module.exports = function() { 
  var greet = document.createElement('div'); 
  greet.textContent = "Hello webpack!"; 
  return greet;
 };

main.js写入如下内容:

//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

正式使用Webpack

1. 通过node_modules/.bin/webpack app/main.js public/bundle.js命令

结果:

三种Webpack打包方式(小结)

此时,public文件夹里面多出了一个bundle.js文件,打开index.html出现Hello webpack!

三种Webpack打包方式(小结) 

2. 通过配置文件

在项目根目录下(和package.json同级)新建webpack.config.js,填入如下内容:

module.exports = { 
  entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 
  output: { 
    path: __dirname + "/public",//打包后的文件存放的地方 
    filename: "bundle.js"//打包后输出文件的文件名 
    }
}

然后在终端运行

node_modules\.bin\webpack

该命令会自动调用webpack.config.js文件中的配置。

3. 更快的方式

第二种其实输入的命令也比较麻烦,我们可以在添加了webpack.config.js后,再在package.json中对scripts进行配置。

{
 "name": "webpack_demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "webpack"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^3.6.0"
 }
}

在scripts中修改成键值对:”test”:”webpack”,在终端直接输入命令:

npm test

注意:

如果将test改成test1则会报错:

{
 "name": "webpack_demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test1": "webpack"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^3.6.0"
 }
}

输入

npm test1

提示信息如下:

三种Webpack打包方式(小结) 

就是命令的名字需要是列举的那一堆里面的,例如start,然后npm start。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue.js更改调试地址端口号的实例
Sep 19 #Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 #Javascript
vue中的计算属性实例详解
Sep 19 #Javascript
Vue axios设置访问基础路径方法
Sep 19 #Javascript
json前后端数据交互相关代码
Sep 19 #Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 #Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP模板解析类实例
2015/07/09 PHP
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python实现单词拼写检查
2015/04/25 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python基于execjs运行js过程解析
2020/11/27 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年林业工作总结
2015/05/14 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书