三种Webpack打包方式
准备工作
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打包方式的更多相关文章
- maven的三种项目打包方式----jar,war,pom
1.pom工程:**用在父级工程或聚合工程中.用来做jar包的版本控制.必须指明这个聚合工程的打包方式为pom 2.war工程:将会打包成war,发布在服务器上的工程.如网站或服务.在SpringBo ...
- VMware的三种网络连接方式区别
关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...
- .NET中的三种接口实现方式
摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...
- Apache Spark探秘:三种分布式部署方式比较
转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ 目 ...
- [转]详述DHCP服务器的三种IP分配方式
DHCP就是动态主机配置协议(Dynamic Host Configuration Protocol),它的目的就是为了减轻TCP/IP网络的规划.管理和维护的负担,解决IP地址空间缺乏问题.这种网络 ...
- Binding 中 Elementname,Source,RelativeSource 三种绑定的方式
在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...
- windows phone 三种数据共享的方式(8)
原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- Kubernetes的三种外部访问方式:NodePort、LoadBalancer和Ingress(转发)
原文 http://cloud.51cto.com/art/201804/570386.htm Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近 ...
随机推荐
- Dataframe 多行合并为一行
原表数据: 最后4行合并为1行: def ab(df): return','.join(df.values) df = df.groupby(['股票代码','股票简称'])['所属概念'].appl ...
- tree与GridView交互
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OgGridView.asp ...
- CF932G Palindrome Partition
思路 首先把字符串变为\(S[1]S[n]s[2]s[n-1] \dots\) 这样原来的一个合法的划分方案就变成了用k个长度为偶数的回文子串划分的方案, 然后直接DP,对i位置,可转移的位置就是它的 ...
- excel 常用函数和实现功能经验总结积累
0.判断一个文本字符串中是否包含数字!/判断一个文本字符串是否是纯汉字! 公式=IF(LENB(A1)=2*LEN(A1),”都是汉字“,“含有非汉字字符”) 解释函数: LEN(A1)#返回文本字符 ...
- [CentOS_7.4]Linux编译安装ffmpeg
[CentOS_7.4]Linux编译安装ffmpeg 安装过程: 下载安装源,配置,编译,安装,设置环境变量. # wget http://www.ffmpeg.org/releases/ffm ...
- JS 基本类型和引用类型---JS 学习笔记(一)
本文参考了focusxxxxy的博客,感谢他的知识分享. 一 基本类型和引用类型的值 ECMAScript 变量包含两种不同数据类型的值:基本类型和引用类型. 也有其他的叫法,比如原始类型和对象类型, ...
- Unity --- 设置选择的图片的格式
static void Setting(string assetPath, int maxSize, TextureImporterFormat androidFormat, TextureImpor ...
- LeetCode--029--两数相除(java)
给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...
- pycharm运行Django项目,提示UnicodeDecodeError: 'gbk' codec can't decode byte 0xa6
确认pycharm编码都是utf-8的情况下,需要修改项目中settings.py 'DIRS': [ ],默认是空,将路径加入即可解决. TEMPLATES = [ { 'BACKEND': 'dj ...
- RecyclerView嵌套ScrollView导致RecyclerView内容显示不全
我们在使用RecyclerView嵌套至ScrollView内的时候 RecyclerView不在屏幕内的数据会不显示出来,这里是一个坑,我们需要重写RecyclerView /** * Create ...