三种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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
微信小程序实现图片上传功能
May 28 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
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
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
JQuery live函数
2010/12/24 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python手写均值滤波
2020/02/19 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
黄金酒广告词
2014/03/21 职场文书
抽奖活动主持词
2014/03/31 职场文书
初一学生期末评语
2014/04/24 职场文书
创建青年文明号材料
2014/05/09 职场文书
考研经验交流会策划书
2015/11/02 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL