2.WebPack初始化
一.Package.json
在项目中输入：
npm init
之后会提示你一步一步输入信息，我输入的信息如下：
生成的Package.json文件如下
我们也可以在初始时省略这些步骤，让脚本使用默认值
npm init –yes
Package.json中的键值对代表以下含义
{
"name": "webpack-demo", //包名
"version": "1.0.0", //版本号 主版本.次版本.修订版本
"description": "", //项目描述
"main": "index.js", //模块入口文件
"scripts": { //脚本 可以使用 npm run test 来省略重复输入
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [], //关键词
"author": "", //作者
"license": "ISC" //许可证
}
注：在Json文件中不能有注释，这里只是为了方便说明。
二、测试
在项目目录下创建以下结构
1.传统方法
在index.js中输入以下内容
msg();
在dependency.js中输入以下内容
function msg() {
console.log("from dependency!");
}
直接在index.html中引入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./src/dependency.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
运行正常
这样有如下的缺点：
网页需要请求两次JS文件
我们需要注意JS依赖，并要手动放置在正确的顺序上，如果dependency.js于index.js先前引入，则会造成运行异常，项目依赖项过多时更是明显。
2.使用WebPack打包
首先改造下index.js和dependency.js，可以使用Commonjs规范或者ES6语法特性来导入导出模块
1.使用Commonjs规范
dependency.js
module.exports.func = function() {
console.log("from dependency!");
}
index.js
const o = require("./dependency")
o.func();
2.使用ES6语法特性
dependency.js
export default function () {
console.log("from dependency!");
}
index.js
import func from "./dependency"
func();
3.打包
在项目目录下输入webpack即可自动打包，打包完成后，在项目目录下生成dist文件夹，可以发现里面生成了一个main.js文件，这便是打包好的文件了。我们修改index.html如下
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <script src="./src/dependency.js"></script>
<script src="./src/index.js"></script> -->
<script src="./dist/main.js"></script>
</body>
</html>
运行页面，可以发现没问题。
我们看下网络请求
可以发现请求数少了一次，看似总时间没有什么变化，那是因为当前请求的文件较少，体现不出WebPack打包生成然后引用一个文件的优势。需要注意的是，WebPack不只可以打包JS文件，还可以打包图片、CSS样式表。
注意：只有WebPack全局安装时才能在任何目录下输入WebPack命令，若不是全局安装，则需要在项目所在目录./node_modules/webpack/bin下才能执行webpack命令，可以使用npx解决这个本地安装所造成的问题。如执行npx webpack命令，它会自动去当前./node_modules目录下找，找不到再会去环境变量指定的路径下找。
以上纯属个人理解，如有错误，希望指正！
2.WebPack初始化的更多相关文章
- webpack初始化
1. 安装node js 2. 安装npm 3. 在桌面新建一个文件夹 4.利用cmd 进入文件夹 5.在cmd中创建一个新文件夹并且进入 6.npm init -y 生成page.json 7. ...
- webpack的简单使用
今天简单的说一下webpack的使用. 打开cmd(也可以用别的看个人爱好) 打开你要创建项目的文件夹: webpack安装: 1.全局安装webpack:$npm install webpack - ...
- webpack 的简单使用
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- Webpack编译结果浅析
如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...
- 手把手教你使用webpack搭建vue框架
我们在使用vue开发项目的时候,都是用vue-cli直接来搭建的.但是这是别人已经造好的轮子,我们既然要使用别人造好的轮子,我们总不能知其然而不知其所以然.所以呢,我这边文章就教你如何使用webpac ...
- webpack打包笔记
optimist是一个node库,将webpack.config.js与shell参数整合成options对象 options对象包含之后构建的重要信息,类似于webpack.config.js we ...
- webPack 4.0的零基础学习
webPack 也更新到了4.0阶段,今天看了一下官网,总结一下,零基础的学习路径吧. (1)首先需要下载 webPake和webpack cli npm install webpack webpac ...
- webpack对vue单文件组件的解析
vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...
随机推荐
- Android_存储访问框架SAF
概念 存储访问框架---Storage Access Framework (SAF),这是在Android4.4(API level 19)之后引入的. 借助 SAF,用户可轻松在其所有首选文档存储提 ...
- Python数据分析：pandas玩转Excel（三）
将对象写入Excel工作表. 要将单个对象写入 Excel .xlsx 文件,只需指定目标文件名即可.要写入多个工作表,必须创建具有目标文件名的ExcelWriter对象,并在文件中指定要写入的工作表 ...
- 设置Mac终端、pip、Anaconda、PyCharm共用一套环境
最近我在用Macbook Pro练习PyTorch的时候,发现明明在终端已经用pip安装了PyTorch,但在pycharm运行时总是报错:No module named torch. 但是我把同样的 ...
- Scala - 语言专家 - Desugar Scala code
https://mp.weixin.qq.com/s/zwrG1MfUzXwtik7jotpQsA 介绍Intellij IDEA中的一个去除Scala语法糖的功能. 1. 去除 ...
- SpringCloud Eureka Client和Server侧配置及Eureka高可用配置
一.Eureka注册中心和客户端配置Demo. 1.Server端 a.使用Idea创建Spring项目,如下所示: b.相关配置 application.yaml配置文件如下: # eureka本身 ...
- 面试官：兄弟，说说Java的static关键字吧
读者乙在上一篇我去系列文章里留言说,"我盲猜下一篇标题是,'我去,你竟然不知道 static 关键字'".我只能说乙猜对了一半,像我这么有才华的博主,怎么可能被读者猜中了心思呢,必 ...
- Java实现 LeetCode 825 适龄的朋友（暴力）
825. 适龄的朋友 人们会互相发送好友请求,现在给定一个包含有他们年龄的数组,ages[i] 表示第 i 个人的年龄. 当满足以下条件时,A 不能给 B(A.B不为同一人)发送好友请求: age[B ...
- Java实现 洛谷 P1060 开心的金明
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱 ...
- Java实现 蓝桥杯 算法训练 递归求二项式系数
算法训练 6-1 递归求二项式系数值 时间限制:10.0s 内存限制:256.0MB 问题描述 样例输入 一个满足题目要求的输入范例. 3 10 样例输出 与上面的样例输入对应的输出. 数据规模和约定 ...
- Java实现 LeetCode 394 字符串解码
394. 字符串解码 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 encoded_string 正好重复 k 次.注意 k ...