前端之webpack构建工具的基础使用

目录

引：为什么使用webpack？

一、Node.js下载

二、准备工作

三、安装webpack

三、在当前目录下新建目录和文件

四、构建本地服务器

五、Source Maps调试配置

六、热更新的使用

七、html-webpack-plugin的使用

八、第三方css-loader加载器 

八、第三方url-loader加载器

九、第三方babel-loader

---

引：为什么使用webpack？

在之前的开发中，我们是在html的头部引入各种js,css文件，正常情况下浏览器会向服务器发送多次请求资源的加载，这样造成请求过多，另外资源的依赖关系管理复杂。因此我们使用webpack来进行前端项目的构建，它是基于Node.js的。

1、npm包管理器，管理开源项目的依赖关系，和后端的maven比较相似；

2、合并、压缩、编码各种资源文件进行统一出口bundle.js，另浏览器不支持的各种特性比如ES6语法，webpack能够编译成浏览器能识别的js文件。

一、Node.js下载

下载地址：https://nodejs.org/zh-cn/download/

下载后并安装后在cmd控制台中输入Node，显示版本号，则安装成功

 

二、准备工作

1、新建文件夹mywebpack

2、cmd到当前目录，并输入 npm init  （npm init -y），一路默认，目录中生成文件 package.json

三、安装webpack

1、安装全局和本地项目的webpack，安装本地时将webpack-cli一并安装

     附：安装npm的淘宝镜像，命令：然后可以使用  cnpm命令快捷使用淘宝镜像

npm install -g cnpm --registry=http://registry.npm.taobao.org

安装webpack 

//全局安装 全写为  cnpm install webpack --gloal
cnpm i webpack -g
//本地安装 全写 cnpm install webpack webpack-cli --save-dev
cnpm i webpack webpack-cli -D

安装会自动下载模块文件 node_modules

三、在当前目录下新建目录和文件

引入jquery模块      

mywebpack>cnp