官网：https://www.webpackjs.com/ 　　　　参考网址：https://www.cnblogs.com/cangqinglang/p/8964460.html

1.webpack简述：是一个前端资源加载/打包工具。

一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

2.webpack的核心概念

入口entry：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，默认./src，可以配置。

出口output：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为./dist，可以配置。

loader（加载器？）：处理非js文件（webpack 自身只理解 JavaScript）。

插件plugins

模式：设置开发模式 development 或 production（mode参数）。

3.安装webpack

使用webpack的前提是了解npm和安装了node.js（百度下载然后下一步下一步安装即可）。根据官网API一步一步的操作就可以。认识了解package.json也很有必要，文档API讲的很清楚了。网上的视频大多数都是早期的，现在webpack已经更新到4.17.1，还是官方文档比较靠谱。

（1）选择合适的地方建个文件夹,初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli。在命令行中运行win+R→cmd

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install webpack webpack-cli --save-dev 
 

（2）在文件夹下创建以下目录结构、文件和内容：

index.js

import _ from 'lodash';

function component() {
var element = document.createElement('div');

// Lodash, currently included via a script, is required for this line to work
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');

return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>起步</title>
</head>

<body>
<script src="main.js"></script>
</body>

</html>

（3）调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除main 入口 

4.创建一个bundle文件（使用webpack打包 ）


（1）要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：




npm install --save lodash






（2）进行打包，会自动创建打包后的main.js文件（boundle）,自己会处理index.js中引入的import：
——执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）：




npx webpack






（3）在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：'Hello webpack'。




注意到package文件的配置项自动修改了。入口修改为main.js


												


											
Webpack 学习手记的更多相关文章
	

    
								
  1. Linux.NET学习手记（7）
		
    前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...
    
		
    2. 
						
  2. Linux.NET学习手记（8）
		
    上一回合中,我们讲解了Linux.NET面对OWIN需要做出的准备,以及介绍了如何将两个支持OWIN协议的框架:SignalR以及NancyFX以OwinHost的方式部署到Linux.NET当中.这 ...
    
		
    3. 
						
  3. 关于《Linux.NET学习手记（8）》的补充说明
		
    早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
    
		
    4. 
						
  4. EF框架学习手记
		
    转载: [ASP.NET MVC]: - EF框架学习手记 1.EF(Entity Framework)实体框架EF是ADO.NET中的一组支持开发面向数据的软件应用程序的技术,是微软的一个ORM框架 ...
    
		
    5. 
						
  5. 【原】webpack学习笔记
		
    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记  ...
    
		
    6. 
						
  6. webpack学习（入门基础）
		
    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...
    
		
    7. 
						
  7. ExtJS MVC 学习手记3
		
    在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
    
		
    8. 
						
  8. ExtJS MVC学习手记
		
    开始学习ExtJS的MVC了.这篇文章仅是用来做一个目录,为自己这个阶段的学习内容做个索引. 手记涉及的文章: EXTJS MVC结构(译自ExtJS4.0文档中的<MVC Architectu ...
    
		
    9. 
						
  9. webpack学习笔记（二）-- 初学者常见问题及解决方法
		
    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. pycharm中split的应用
			
    #input 字符串 “5+9” value = "5+9" v1,v2 = value.split("+")#意思是把加号前后的5和9分别赋值给v1,v2 v ...
    
			
    2. 
						
  2. POJ 1208 The Blocks Problem --vector
			
    http://poj.org/problem?id=1208 晚点仔细看 https://blog.csdn.net/yxz8102/article/details/53098575 #include ...
    
			
    3. 
						
  3. python MRO:C3算法
			
    http://www.codeweblog.com/python-mro-c3%E7%AE%97%E6%B3%95/ 在 python 2.2 之后,python 实现了一个新的MRO算法:C3算法, ...
    
			
    4. 
						
  4. Arrange the Bulls [POJ2441] [状压DP]
			
    题意 n头牛,m个房间,每头牛有自己喜欢的房间,问每头牛都住进自己喜欢的房间有多少种分配方法? Input In the first line of input contains two intege ...
    
			
    5. 
						
  5. SpringMVC用到的jar包
			
    SpringMVC用到的jar包 自己搭建一个SpringMVC框架时需要用到相应的jar包,参考下载网址: http://repo.spring.io/release/org/springframe ...
    
			
    6. 
						
  6. vue_过滤器： 对要显示的数据进行特定格式化后再显示
			
    过滤器 对要显示的数据进行特定格式化后再显示 并未改变原本的数据,可是产生新的对应的数据 <!DOCTYPE html> <html lang="en">  ...
    
			
    7. 
						
  7. 超小Web手势库AlloyFinger原理(转载)
			
    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyF ...
    
			
    8. 
						
  8. 输入二进制数转换成十进制数（在cin>>和cin.get()上掉的坑）
			
    题目:输入一个二进制数转换成十进制. 题目分析:书上说,在一般情况下,c++的键盘输入可以识别是十进制数.八进制数和十六进制数,因此输入的二进制数据要作为字符处理.(其实我觉得数字也没问题吧). 正确 ...
    
			
    9. 
						
  9. Ubuntu软件安装与卸载
			
    ubuntu软件安装与卸载 更新Ubuntu软件下载地址 1. 寻找国内镜像源 所谓的镜像源:可以理解为提供下载软件的地方,比如Android手机上可以下载软件的91手机助手:iOS手机上可以下载软件 ...
    
			
    10. 
						
  10. linux 软链接和硬链接的区别 和 inode 的理解
			
    软连接和硬连接的区别:1.创建的方式不同软:ln -s 源文件 连接名硬:ln 源文件 连接名 2.原理不同,和删除源文件对其的影响.硬连接的inode节点和源文件的inode节点一样.也就是同一个i ...
    
			
    11.