学习目标：

WebPack的安装及使用

学习内容：

WebPack的使用

学习时间：

学习产出：

WebPack

1、介绍

WebPack是一款模块加载打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片
等都作为模块来处理和使用。

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

WebPack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源，
还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;

伴随着移动互联网的大潮，当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里，使用HTML5、CSS3、ES6 等新的技术来开发丰富的功能，网页已经不仅仅是完成浏览器的基本需求; WebApp通常是一个SPA (单页面应用) ，每一个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的JS代码，这给前端的开发流程和资源组织带来了巨大挑战。

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统，这个理想中的模块化系统是前端工程师多年来一直探索的难题。

2、安装

cmd命令:npm install webpack -gnpm install webpack-cli -g
安装完成后输入:webpack -vwebpack-cli -v测试是否安装成功

3、使用WebPack

1、在IDEA中创建一个项目，将所有内容都删除，只剩下.idea文件
2、在项目中创建一个modules目录，在目录下创建hello.js、main.js两个文件，内容如下

hello.js

//暴露一个方法
exports.sayHi=function (){document.write("童一");
}

main.js：当作是js主入口

//引入hello.js，然后用hello调用hello.js中的方法sayHi
var hello = require("./hello");
hello.sayHi();

3、在根目录下创建webpack.config.js文件, 这个相当于webpack的配置文件内容如下
创建 webpack.config.js配置文件
entry：入口文件，指定Web Pack用哪个文件作为项目的入口
output：输出，指定WebPack把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包

module.exports={/*入口，请求某个文件*/entry:'./modules/main.js',/*输出位置*/output:{filename:"./js/bundle.js"},mode:'development'
};

4、在控制台输入webpack命令，生成dist目录，在生成的js文件夹下面会有一个bundle.js文件
5、创建index.js导入bundle.js，内容如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webpack</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

浏览器打开index页面，可以看到内容，成功

WebPack的安装及使用相关推荐

webpack的安装和使用
Webpack是什么首先可以看下官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...
webpack指南-webpack入门-webpack的安装
https://webpack.js.org/guides/installation/ 安装前提要求开始之前,确保安装了最新的Node.js.推荐安装目前的LTS版本.由于可能缺失webpack以 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
webPack之安装配置教程
流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载. Step 2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中 ...
Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
webpack 环境安装
2019独角兽企业重金招聘Python工程师标准>>> 1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm,Webpack 需要Node.js v0.6 以 ...
webpack的安装及使用webpack打包js、css文件
目录 webpack介绍前端模块化和打包概念介绍 webpack和grunt/gulp的对比 webpack和nodejs的关系 webpack安装 webpack使用示例环境搭建使用webpa ...
【WebPack】WebPack的安装、使用WebPack打包 js/css/img 等文件
目录 webpack和node和npm的关系 npm install webpack -g -g是全局的意思项目中一般有两个文件夹: src,dist(distribution) WebPack的使 ...
npm 安装less插件_node+npm+webpack+less安装
本节主要内容:什么是LESS 为什么选择LESS 安装webpack编译环境什么是Less LESS是前端css样式预处理器中的一种,和它相同类型的语言还有Sass以及Stylus.它是css语言的 ...

WebPack的安装及使用

学习目标：

WebPack的安装及使用

学习内容：

WebPack的使用

学习时间：

学习产出：

WebPack

1、介绍

2、安装

3、使用WebPack

WebPack的安装及使用相关推荐

最新文章

热门文章