一.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>

运行正常

这样有如下的缺点：
  1. 网页需要请求两次JS文件
  2. 我们需要注意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初始化的更多相关文章

  1. webpack初始化

    1. 安装node js 2. 安装npm 3. 在桌面新建一个文件夹 4.利用cmd 进入文件夹 5.在cmd中创建一个新文件夹并且进入 6.npm init -y  生成page.json 7. ...

  2. webpack的简单使用

    今天简单的说一下webpack的使用. 打开cmd(也可以用别的看个人爱好) 打开你要创建项目的文件夹: webpack安装: 1.全局安装webpack:$npm install webpack - ...

  3. webpack 的简单使用

    p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...

  4. JavaScript自动化构建工具入门----grunt、gulp、webpack

    蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css   需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动  自动化时代的程序员: 希望一切都可以自动完成  ...

  5. Webpack编译结果浅析

    如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发. 你是否好奇你写的代码经过Webpack构建之后会生成什么东西?是否有时调试 ...

  6. 手把手教你使用webpack搭建vue框架

    我们在使用vue开发项目的时候,都是用vue-cli直接来搭建的.但是这是别人已经造好的轮子,我们既然要使用别人造好的轮子,我们总不能知其然而不知其所以然.所以呢,我这边文章就教你如何使用webpac ...

  7. webpack打包笔记

    optimist是一个node库,将webpack.config.js与shell参数整合成options对象 options对象包含之后构建的重要信息,类似于webpack.config.js we ...

  8. webPack 4.0的零基础学习

    webPack 也更新到了4.0阶段,今天看了一下官网,总结一下,零基础的学习路径吧. (1)首先需要下载 webPake和webpack cli npm install webpack webpac ...

  9. webpack对vue单文件组件的解析

    vue2.0 Step0: 首先vuelLoaderPlugin会在webpack初始化的时候 注入pitcher这个rule,然后将rules进行排序, [pitcher,...clonedRule ...

随机推荐

  1. [优文翻译]001.真正程序员该是什么样的(How To Be A Real Programmer)

    01.Real Programmers don't write specs -- users should consider themselves lucky to get any programs ...

  2. python requests用于测试

    https://blog.csdn.net/niedongri/article/details/71404314 https://blog.csdn.net/temanm/article/detail ...

  3. 路由器硬改+刷OpenWrt+挂载摄像头+U盘

    标题: 路由器硬改+刷OpenWrt+挂载摄像头+U盘 作者: 梦幻之心星 347369787@QQ.com 标签: [路由器, OpenWrt, 摄像头, 固件] 目录: 路由器 日期: 2019- ...

  4. Vue拖拽交换数据（非插件）

    HelloWorld.vue 文件 <template> <div class="hello"> <h1>{{ msg }}</h1> ...

  5. PMP 冲！|项目整合管理

    0x00概述 项目管理包括识别.定义.组合.统一与协调各项目管理过程组的过程及项目管理活动.包括在各个项目冲突的目标与方案之间进行权衡和选择. 整合管理包括进行如下选择: 资源分配: 平衡竞争性需求: ...

  6. day 6 （笔记由图转）

    .

  7. Beta冲刺 —— 5.30

    这个作业属于哪个课程 软件工程 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.会议内容 1.讨论并解决每个人存在的问 ...

  8. Java实现 蓝桥杯VIP 算法提高 传染病控制

    算法提高 传染病控制 时间限制:1.0s 内存限制:512.0MB 问题描述 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范围流行,该国政府决定不惜一切代价控制传染病的 ...

  9. java实现数字黑洞

    任意一个 5 位数,比如:34256,把它的各位数字打乱,重新排列,可以得到 一个最大的数:65432,一个最小的数 23456. 求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不 ...

  10. java实现第五届蓝桥杯六角填数

    六角填数 题目描述 如图[1.png]所示六角形中,填入1~12的数字. 使得每条直线上的数字之和都相同. 图中,已经替你填好了3个数字,请你计算星号位置所代表的数字是多少? 请通过浏览器提交答案,不 ...