三种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调用WebService的示例
Apr 07 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
node.js制作一个简单的登录拦截器
Feb 10 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
期末自我鉴定
2014/02/02 职场文书
消防安全汇报材料
2014/02/08 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
2015年市场部工作总结
2015/04/30 职场文书
车位出租协议书范本
2016/03/19 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python