三种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 相关文章推荐
JS正则中的RegExp对象对象
Nov 07 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
javascript生成随机数的方法
May 16 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 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学习之正则表达式
2011/04/17 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
深入学习Python中的装饰器使用
2016/06/20 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
代领报检证委托书范本
2014/10/11 职场文书
少年雷锋观后感
2015/06/10 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
科级干部培训心得体会
2016/01/06 职场文书
如何书写邀请函?
2019/06/24 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技