准备工作
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
通过node_modules/.bin/webpack app/main.js public/bundle.js命令
结果：

此时，public文件夹里面多出了一个bundle.js文件，打开index.html出现Hello 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
1
该命令会自动调用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

提示信息如下：

就是命令的名字需要是列举的那一堆里面的，例如start，然后npm start。
---------------------
作者：一只奇妙开心的小猪

来源：CSDN
原文：https://www.cnblogs.com/zqlian/p/9881804.html 
版权声明：本文为博主原创文章，转载请附上博文链接！

三种Webpack打包方式的更多相关文章

  1. maven的三种项目打包方式----jar，war，pom

    1.pom工程:**用在父级工程或聚合工程中.用来做jar包的版本控制.必须指明这个聚合工程的打包方式为pom 2.war工程:将会打包成war,发布在服务器上的工程.如网站或服务.在SpringBo ...

  2. VMware的三种网络连接方式区别

    关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...

  3. .NET中的三种接口实现方式

    摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...

  4. Apache Spark探秘：三种分布式部署方式比较

    转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/     目 ...

  5. [转]详述DHCP服务器的三种IP分配方式

    DHCP就是动态主机配置协议(Dynamic Host Configuration Protocol),它的目的就是为了减轻TCP/IP网络的规划.管理和维护的负担,解决IP地址空间缺乏问题.这种网络 ...

  6. Binding 中 Elementname，Source，RelativeSource 三种绑定的方式

    在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...

  7. windows phone 三种数据共享的方式(8)

    原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...

  8. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  9. Kubernetes的三种外部访问方式：NodePort、LoadBalancer和Ingress（转发）

    原文 http://cloud.51cto.com/art/201804/570386.htm Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近 ...

随机推荐

  1. ECS之Git服务器搭建

    最简教程 ### . 安装Git 安装Git服务,命令如下: ```Shell $ yum install curl-devel expat-devel gettext-devel openssl-d ...

  2. line-height各类属性值

    line-height支持属性值 1.normal(默认属性) 跟着用户的浏览器走,且与元素字体关联 normal值 = 字体大小/100 2.<number> 使用数值作为行高值.如:l ...

  3. bzoj2054疯狂的馒头——线段树

    中文题面,一排有n个馒头,用刷子把整个连续的区间刷成一种颜色.因为颜色会覆盖掉之前的.所以我们可以用线段树来反着处理.如果这段区间之前刷到过就不要再遍历进去了,因为这次已经被上次刷的颜色给覆盖了.最后 ...

  4. H5外包团队 技术分享 基于H5+的项目分享

    项目截图:             有H5项目需求欢迎联系我们 我们提供免费的项目评估报价 QQ:372900288 WX:Liuxiang0884

  5. Android 自定义类型文件与程序关联

    0x01 功能 实现在其他应用中打开某个后缀名的文件 可以直接跳转到本应用中的某个activity进行处理 0x01 实现 首先创建一个activity ,然后在manifest里对该activity ...

  6. js斐波那契数列

    斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...... 这个数列从第3项开始,每一项都等于前两项之和. 1.递归算法: function ...

  7. crop image 需要的基础知识

    refer : https://www.youtube.com/watch?v=R7dObDtw1aA https://www.shuxuele.com/algebra/trig-finding-an ...

  8. 小账本APP——软件项目风险管理及解决办法案例

    小账本APP——软件项目风险管理及解决办法案例 摘要 软件项目风险是指在软件开发过程中遇到的预算和进度等方面的问题以及这些问题对软件项目的影响.软件项目风险会影响项目计划的实现,如果项目风险变成现实, ...

  9. numpy和matplotlib

    Python的科学计算包 – Numpy numpy(Numerical Python extensions)是一个第三方的Python包,用于科学计算.这个库的前身是1995年就开始开发的一个用于数 ...

  10. js统一设置富文本中的图片宽度

    var txt = layedit.getContent(ieditor);//获取编辑器内的文本var regex = new RegExp('<img', 'gi');txt = txt.r ...