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 ...
随机推荐
- linux添加策略路由python脚本(待完善)
#! _*_ coding:utf-8 _*_ import os,sys,re,fileinput,socket device_list = [] ip_list = [] ip_end = [] ...
- [JavaWeb基础] 014.Struts2 标签库学习
在Struts1和Struts2中都有很多很方便使用的标签库,使用它可以让我们的页面代码更加的简洁,易懂,规范.标签的形式就跟html的标签形式一样.上面的篇章中我们也讲解了自定义标签那么在如何使用标 ...
- static关键字的应用
static关键字的应用:使用静态的变量可以实现 "累加" 的效果 package com.aff.statics; public class TestCircle { pub ...
- 深度学习入门: CNN与LSTM(RNN)
1. 理解深度学习与CNN: 台湾李宏毅教授的入门视频<一天搞懂深度学习>:https://www.bilibili.com/video/av16543434/ 其中对CNN算法的矩阵卷积 ...
- R语言入门二
一.R语言应知常用函数 1.getwd() 函数:获取工作目录(同eclipse设置workspace类似),直接在R软件中使用,如下图: 2.setwd(dir=”工作目录”) 函数:设置R软件RS ...
- Function's dict
众所周知,Python是没有switch的,那么只能使用 if else来进行判断,但是if else比较冗长, 使用太多的if else 代码看起来不简洁,如下 student.py def stu ...
- [01]HTML基础之简单介绍
1.前言 现如今科技进步,足不出户尽晓天下事,一转身便仿若隔世茫然.科技绽放时代,网络技术对人们的触变无疑是深远而重大的,隐于缤纷绚丽的网页背后,是前端的蜕变更新. 如今,随意点开页面,绚丽华彩的特效 ...
- ES6-Promise承诺
1.扩展:ajax 1.1 代码如下 $.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:funct ...
- .net remoting(一)
一.远程对象 ①RemoteHello.csproj 类库项目,程序集名称 RemoteHello ,默认命名空间 Wrox.ProCSharp.Remoting: ②派生自System.Marssh ...
- 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...