三种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中this关键字的一些小知识
Mar 15 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
JS请求servlet功能示例
Jun 01 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序tabBar设置实例解析
Nov 14 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python直接访问私有属性的简单方法
2016/07/25 Python
使用Python对Access读写操作
2017/03/30 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python变量的存储原理详解
2019/07/10 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
表彰先进的通报
2014/01/31 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
唐山大地震的观后感
2015/06/05 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers