前言：
此时姐妹们对“webpack不打包某个模块”大约比较注重，姐妹们都需要了解一些“webpack不打包某个模块”的相关资讯。那么小编也在网摘上搜集了一些关于“webpack不打包某个模块””的相关知识，希望姐妹们能喜欢，同学们一起来学习一下吧！webpack工具是现代JavaScript构建脚本资源模块的打包器。当使用webpack构建资源时，它会递归的构建一个依赖关系图，将所有需要打包的脚本资源集成少量的文件资源，最终由浏览器加载其打包好的文件资源。
webpack有四个核心概念：入口（entry）、出口（output）、加载器（loader）、插件（plugins）。
入口（entry）:首先要明确将哪些js、css、png、font等资源文件打包成自己想要资源文件，也就指的是原文件。要不然的话webpack怎么知道哪些文件需要打包呢？
出口（output）：webpack将入口（entry）文件资源合并成单个或少量的最终资源文件。
加载器（loader）：当webpack加载入口（entry）的CSS文件、图片文件、字体文件时，webpack是不认识的这些文件的，需要借助加载器，将这些文件引入进来。如果不使用加载器是无法打包不成功的。
插件（plugins）:插件是webpack的支柱功能，插件的目的是为实现loader无法实现的其它事。
从上幅图我们可以看出 大概的关系。
我在Windows10 操作系统下给大家演示一下webpack是如何安装使用的：
在使用wenpack之前首先下载node.js安装，我这里安装的V8.4.0版本的node.js。不懂安装的去搜一下吧！
查看node.js版本命令:node -v
node.js是自带了一个npm工具的，查看npm版本命令:npm -v。
接着我在本地电脑H盘手动创建了webpack-demo文件夹，然后在webpack-demo文件夹使用npm命令初始化了一个package.json文件。
创建package.json命令:cmd进入webpack-demo文件之后使用npm init命令生成package.json。
接着还是在cmd webpack-demo文件夹中使用npm来安装webpack需要依赖的模块，(本地)安装webpack命令：npm install --save-dev webpack
基本的安装工作都已经完成了。
在webpack-demo文件夹下创建一个 dist文件、dist/index.html、src文件、src/index.js。目录结构如下图:
index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<!--由webpack 生成的bundle.js-->
<script type="text/javascript" src="bundle.js" ></script>
</body>
</html>
index.js 文件
function component() {
var element = document.createElement('div');
element.innerHTML = "Hello World";
return element;
}
document.body.appendChild(component());
使用命令：webpack src\index.js dist\bundle.js 打包，将index.js打包到dist\bundle.js
dist文件夹生成了一个bundle.js
在打开index.html页面看看是不是打印了Hello World？
这里我想说的是，webpack可以将多个入口资源文件打包成一个文件，然后有页面去引用·。
可能大家也有很多疑问？package.json是什么？webpack可以简化命令打包吗？后面慢慢的掀开webpack的神秘面纱。
如有疑问，可在下面进行评论！
标签： #webpack不打包某个模块
