三种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读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 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中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python读写csv文件实例代码
2019/07/05 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Python爬取某平台短视频的方法
2021/02/08 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
汽车驾驶求职信
2013/10/25 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
工作说明书范文
2014/05/07 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
教师先进事迹材料
2014/12/16 职场文书
公积金接收函格式
2015/01/30 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
MySQL 四种连接和多表查询详解
2021/07/16 MySQL