开发者学堂课程【前端自动化构建工具 Webpack：webpack 最基本的使用方式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8210
webpack 最基本的使用方式
目录：
一、全局工具
二、什么是 webpack
三、建立项目基本结构
四、初步使用 webpack 打包构建列表隔行变色案例
五、项目基本结构
六、这是 main.js 是项目的 Js 入口文件
七、经过刚才的演示，webpack 可以做什么事情
一、全局工具
webpack 分两个版本，它第一个版本是 webpack1，最新的一个是 webpack3。
webpack 是一个工具，既然是工具我们就需要安装起来。
1、第一种选取安装通过 npm i webpack -g 全局安装安装为全局工具。
这个全局安装有一个特点，如果装完一次，只要电脑没有系统上的 bug 和重装系统，就永远不需要在次安装了，这就是全局安装的特点。
2、项目里面有时候也会依赖 webpack，所以还可以通过 webpack--save--dev 安装到项目依赖中。
3、运行 cmd 输入npm i webpack-g 全局安装
4、用 webpack 做一些事情
打开项目根目录 webpack-study，先建项目的基本机构，文件夹 src 在创建一个dist，项目做完了需要发布，就可以把发布好的文件都放到dist里面去，将来直接把dist 拷贝用户，包括在网上下包的时候会发现有的包里面都带一个 dist，在 src 下面建立文件夹 css、 js 、images 在 js下面创建index.html，一个项目首先要有 js 入口的文件在 src下面建一个 main.js
main.js 的作用：这个 main.js 是我们项目的 Js 入口文件
5、快速初始化
<1i>这是第1个
保存右键预览页面
页面浏览效果图：
6、要实现一个列表变色，首先安装 jquery 需要 init一下 npm init-y
npm i jquery-s 安装完毕，然后实现功能，第一步导入 src。
注意:不推荐直接在这里引用任何包和任何css文件
原因：项目里面已经分析了一些问题，网站可能会引用很多的静态资源这些静态资源是拖慢进度的元凶，现在还这么做就回到以前的问题里面去了，所以不
推荐直接在这里引用任何包和任何css文件。
解决办法：把所有东西都在main.js里面去写，将来直接引用一个 main 就行了。
导入jquery
import ***from***是Es6中导入模块的方式
import $ from 'jquery'
const $ = require( 'jquery ' )
这样就可以导入jquery
输入代码
$(function（） {
$('li:odd').css('backgroundcolor','lightblue')
$('li:even').css('backgroundcolor',function(){
return '#’+'D97634'
打码写完了需要把 main 导入到 index 里面，需要两次请求一次是 jquery 一次是自己的脚本，现在只引用一次脚本就可以。
输入代码
保存打开页面发现没有效果，发现语法错误记住Syntax是语法错误 Unexpected token 不识别 import，这是预览器中的语法支持的语法比较低，由于 ES6 的代码，太高级了，浏览器解析不了，所以这一行执行会报错，这样不行的话用 note 里面的语法这是比较低级的语法保存，回到预览器会发现依旧不可以运行。
解决办法：使用 webpack 刚才已经安装 webpack
输入cls
在项目根目录里面输入 webpack webpack 不可以直接运行有一个参数
webpack.\src\main.js .\dist\bundle.js任意起名都可以推荐用bundle
运行 webpack 命令要去处理 main.js 文件把路径给.\src\main.js 这个文件处理完毕要形成那个文件存到那个目录里面去放到.\dist\bundle.js回车
会发现代码很多这都是webpack在处理
因为 main 中的代码，涉及到了 ES6 的新语法，但是浏览器不识别，
所以 main 不能直接应用
通过 webpack 这么一个前端构建工具，把 main.js 做了一下处理，生成了一个bundle .js 的文件
二、什么是 webpack
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具﹔
三、建立项目基本结构
建立文件夹
在src下面建立 css 建立 js 建立images
在js下面建立 indes.html 建立main.js
这是main.js 是项目的JS入口文件
初始化
，initial-scale=1.0">
Document
注意:不推荐直接在这里引用任何包和任何css文件
<1i>这是第1个
预览页面
输入代码npm i jquery-S
四、初步使用 webpack 打包构建列表隔行变色案例
1．运行‘npm init`初始化项目，使用 nprm 管理项目中的依赖包2.创建项目基本的目录结构
3．使用‘cnpm i jquery --save`安装 jquery 类库4．创建`main.j=`并书写各行变色的代码逻辑:
五、项目基本结构
Document
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!--
注意:不推荐直接在这里引用任何包和任何css文件--><!--因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别
--><!-- <script src=" . /main .js"></ script> --><!--通过webpack这么一个前端构建工具，把 main.js 做了一下处理，生成了一个 bundle.js 的文件--><script src=" ../dist/bundle.js"></script>
六、这是 main.js 是项目的 Js 入口文件
1．导入Jquery
import ***from***是Es6中导入模块的方式
由于Es6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from 'jquery'
const $ = require ( ' Hquery ')
$(function () {
$ ( 'li:odd' ).css ( 'backgroundcolor ', 'lightblue ')
$ ( 'li:even' ).css ( 'backgroundcolor' , function （）{
return '#’+ 'D97634'
七、经过刚才的演示，webpack 可以做什么事情
1. webpack 能够处理 Js 文件的互相依赖关系;
2. webpack 能够处理 as 的兼容问题，把高级的、浏览器不是别的语法，转为低级的，浏览器能正常识别的语法
刚才运行的命令格式 :webpack 要打包的文件的路径打包好的输出文件的路径
