webpack的安装与使用

模块化规范-ES6模块化

在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJs等模块化规范.

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如:

• AMD和CMD适用于浏览器端的Javascript模块化
• commonJs适用于服务器端的Javascript模块化

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

webpack的安装与使用

webpack介绍

webpack 是前端项目的构建工具，开发项目时，如果想要提高维护性和可控制性的话，尽量选择webpack进行构建;

webpack非常适合与单页面应用程序结合使用;

不太适合与多页面的普通网站结合使用;
项目中使用webpack有什么好处:

• 能够处理静态资源的依赖关系;

• 能够优化项目代码，比如:压缩合并文件，把图片转为base64编码格式;

• 能够把高级的语法转为低级的语法;

• webpack 能够转换一些横板文件;.vue

webpack是前端的一个项目构建工具，它是基于Node.js开发出来一个前端工具，同时，也有很多人称它为前端项目打包工具。

webpack的安装

第一种方式：全局安装

在命令行输入

npm install webpack -g

第二种方式：安装到项目依赖

在项目根目录运行指令

npm install webpack -S	//开发环境
npm install webpack -D	//生产环境

webpack的初次使用

1. 初始化npm环境

   在VSCode新建一个项目，并且在项目根目录下打开终端命令行输入指令

   npm init -y
   

2. 构建项目结构

   

   • src为开发时期的代码
   • dist为打包完成后的代码
   • main.js为

3. 下载jquery依赖

   npm install jquery -s	//
   

   • npm install -d 就是 npm install --save-dev 安装到开发环境 例如 gulp ，babel，webpack 一般都是辅助工具

   • npm insatll -s 就是npm install --save 安装到生产环境 如 vue ,react 等

4. js文件中导入jquery模块

   //表示导入jquery模块并用$引用
   import $ from 'jquery'
   

5. js中写功能代码

   $(function(){
   	...
   })
   

6. 导入js文件到html文件中

   <script src="./js/index.js"></script>