三种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 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 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
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
如何用php获取文件名后缀
2013/06/09 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
介绍Python中的__future__模块
2015/04/27 Python
Python绘制七段数码管实例代码
2017/12/20 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python属于解释型语言么
2020/06/15 Python
python 制作本地应用搜索工具
2021/02/27 Python
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
乡镇个人对照检查材料
2014/08/22 职场文书
公司的力量观后感
2015/06/05 职场文书
在校学生证明格式
2015/06/24 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android