webpack3的使用及版本配置

在网页中会引用那些常见的静态资源？

+JS

• .js .jsx .coffee .ts(TypeScript 类 C# 语言)

+css

• .css .less .sass .scss

+Images

• .jpg .png .gif .bmp .svg

+字体文件（Fonts）

• .svg .ttf .eot .woff .woff2

+模板文件

• .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？

1.网页加载速度慢，因为，我们要发起很多的二次请求

2.要处理错综复杂的依赖关系

如何解决上述两个问题

1.合并、压缩、精灵图、图片的base64编码

2.可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

什么是webpack

webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具；

如何完美实现上述的2种解决方案

1.使用Gulp，是基于task任务的；

2.使用webpack，是基于整个项目进行构建的；

+借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

+根据官网的图片介绍webpack打包的过程

+webpack官网

webpack安装的两种方式

1.运行 npm i webpack -g 全局安装webpack，这样就能在全局使用webpack的命令

2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

注：使用webpack4以上版本，在下载完nodejs之后的配置需要安装全局 webpack webpack-cli

cnpm i 命令是下载package.json文件中配置的所有文件

初步使用webpack打包构建列表隔行变色案例

**（1）.**运行npm init -y初始化项目，使用npm管理项目中的依赖包

（2）.创建项目基本的目录结构

（3）.使用cnpm i jquery --save安装jquery类库

（4）.创建main.js并书写隔行变色的代码逻辑

//导入jquery类库
import $ from 'jquery'
//设置偶数行背景颜色，索引从0开始，0是偶数
$('#list li:even').css('backgroundColor','lightblue');
//设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');

（5）.直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；

（6）.运行webpack入口文件路径 输出文件路径对main.js进行处理

webpack ./src/main.js  ./dist/bundle.js

注：如果你的webpack是4.0版本以上的则：运行 webpack 入口文件路径输出文件路径对main.js进行处理为：webpack src/js/main.js -o dist/bundle.js

-o:意为打包输出文件

（7）.webpack命令 在根目录下创建webpack.config.js文件，实现入口文件和出口文件的配置。这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象

const path=require('path');
module.exports={
    //在配置文件中，需要手动指定 入口 和 出口
    entry:path.json(__dirname,'./src/main.js');
    output:{
         path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
         filename: 'bundle.js' //这是指定 输出的文件的名称
    }
}

当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了一下几步：

1.首先，webpack 发现我们没有通过命令的形式，给它指定入口和出口

2.webpack 就会去项目的根目录中，查找一个叫做 ‘webpack.json.js’ 的配置文件

3.当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象

4.当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建；

**(8)**webpack-dev-server

8.1 .使用 webpack-dev-server 这个工具，来实现自动打包编译的功能

​ 1.运行 cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

​ 2.安装完毕后，这个工具的用法和 webpack 命令的用法，完全一样

​ 3.由于，我们是在项目中，本地安装的 webpack-dev-server，所以，无法把它当做脚本命令在 powershell 终端中直接运行；（只有那些安装在全局 -g 的工具，才能在终端中正常执行）

​ 4.webpack-dev-server 这个工具，如果要想正常运行，要求在本地项目中，必须安装 webpack:cnpm i webpack -D(然后在package.json文件中的scripts节点上配置上 “dev”: “webpack-dev-server”)

​ 5.webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是直接 托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的 bundle.js

​ 6.我们可以认为 webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js

8.2 webpack-dev-server 的常用命令参数（有两种方式）

第一种方式： “dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”, 在package.json文件的scripts节点下 配置 “dev” 在终端执行 npm run dev

第二种方式：在webpack.config.js文件中配置 在终端执行 npm run dev

const path = require('path');
const webpack = require('webpack')
module.exports = {
    //在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'), //入口，表示，要使用 webpack 打包那个文件
    output: { //输出相关的配置
        path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
    },
    devServer: { //这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot
        open: true, //自动打开浏览器
        port: 3000, //设置启动时候的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启用热更新  的第一步
    }
  }

9.html-webpack-plugin

安装：cnpm i html-webpack-plugin -D

当使用 html-webpack-plugin 之后，我们不再需要手动处理 bundle.js 的引用路径了，因为这个插件，已经帮我们自动创建了一个合适的 script ,并且引用了正确的路径

注：只要是插件，都一定要放到 plugins 节点中去

const path = require('path');
const webpack = require('webpack') //启用热更新的第二步
const htmlWebpackPlugin = require('html-webpack-plugin')

//这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
    //在配置文件中，需要手动指定 入口 和 出口
    entry: path.join(__dirname, './src/main.js'), //入口，表示，要使用 webpack 打包那个文件
    output: { //输出相关的配置
        path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
    },
    devServer: { //这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot
        open: true, //自动打开浏览器
        port: 3000, //设置启动时候的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启用热更新  的第一步
    },
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，这是 启用热更新的第三部
        new htmlWebpackPlugin({ //创建一个在内存中生成 HTML 页面的插件
            tempalte: './src/index.html', //指定 模板页面,将来会根据指定的页面路径，生成内存中的 页面
            filename: 'index.html' //指定生成的页面的名称
        })
    ]
}

**10 **配置处理样式的第三方 loader

webpack，默认只能打包处理 JS 类型的文件，无法处理其他的非 JS 类型的文件；如果想要处理非 JS 类型的文件，我们需要手动安装一些合适的第三方 loader 加载器。

如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D;

如果想要打包处理 less 文件，需要安装 cnpm i less-loader less -D;

如果想要打包处理 sass 文件，需要安装 cnpm i sass-loader node-sass -D;

打开 webpack.config.js 这个配置文件，在里面新增一个节点，叫做 module ，它是一个对象；在这个 module 对象身上，有个 rules 属性，这个 rules 属性是个数组；这个数组中，存放了，所有第三方文件的匹配和处理规则。

注：webpack处理第三方文件类型的过程：

1.发现这个要处理的文件不是 JS 文件，然后就去配置文件中查找有没有对应的第三方 loader 规则

2.如果能找到对应的规则，就会调用对应的 loader 处理这种文件类型

3.在调用 loader 的时候，是从后往前调用的；

4.当最后的一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去。

main.js

import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
$(function() {
    $('li:odd').css('backgroundColor', 'red');
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    });
})

webpack.json.js

const path = require('path');
const webpack = require('webpack') //启用热更新的第二步
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口，表示，要使用 webpack 打包那个文件
    output: { //输出相关的配置
        path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' //这是指定 输出的文件的名称
    },
    devServer: { //这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        // --open --port 3000 --contentBase src --hot
        open: true, //自动打开浏览器
        port: 3000, //设置启动时候的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启用热更新  的第一步
    },
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，这是 启用热更新的第三部
        new htmlWebpackPlugin({ //创建一个在内存中生成 HTML 页面的插件
            tempalte: './src/index.html', //指定 模板页面,将来会根据指定的页面路径，生成内存中的 页面
            filename: 'index.html' //指定生成的页面的名称
        })
    ],
    module: { //这个节点，用于配置所有第三方模块加载器
        rules: [ //所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置处理 .css 文件的第三方 loader 规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, //配置处理 .scss 文件的 第三方 loader 规则
        ]
    }
}

11 cnpm i url-loader file-loader -D

默认情况下，webpack无法处理 css文件中的url地址，不管是图片还是字体库，只要是url地址都处理不了。这是需要下载处理图片的第三方插件cnpm i url-loader file-loader -D

1.处理图片：下载完毕后在webpack.config.js的module的rules下配置处理图片的loader{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=13749&name=[hash:8]-[name].[ext]' },

注：limit给定的值，是图片的大小，单位是byte，如果我们引用的图片大于给定的limit值，则会被转为base64格式的字符串，如果图片小于或等于给定的limit值则不会被转为base64字符串

2.处理字体文件：首先在main.js文件中引入import 'bootstrap/dist/css/bootstrap.css'，然后在webpack.config.js的module的rules下配置处理字体的loader，{ test: /\.(ttf|svg|eot|woff|woff2)$/, use: 'url-loader' },

注：如果要通过路劲的形式，去引入node_modules中相关的文案，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径，不写node_modules这一层目录，默认就会去node_modules中查找

12webpack中babel的配置

在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6或ES7语法，webpack是处理不了的；这时候，就需要借助于第三方的loader，来帮助webpack处理这些更高级的语法，当第三方loader把高级语法转换为低级语法只有，就会把结果交给webpack去打包到 bundle.js 中

1.在webpack中，可以运行如下两套命令，安装两套包，去安装babel相关的loader功能：

1.1 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

1.2第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

2.打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

2.1{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

2.2注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉，原因有俩：

2.2.1如果不排除node_modules,则babel会把 node_modules 中所有的第三方 JS 文件，都打包编译，这样会非常消耗 CPU ，同时，打包得速度非常慢

2.2.2哪怕，最终，babel把所有的node_modules中的JS转换完毕了，但是，项目也无法正常运行！

3.在项目中的根目录中，新建一个叫做.babelrc的babel配置文件，这个配置文件属于JSON格式，所以在写.babelrc配置的时候，必须符合 JSON 语法规则：不能写注释，字符串必须用双引号

3.1在.babelrc写如下的配置：

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

4.了解：目前我们安装的babel-preset-env，是比较新的ES语法，之前，我们安装的是babel-preset-es2015，现在，除了语法插件，叫做babel-preset-env，它包含了所有的和ES***相关的语法

例1
//class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式
class Person {
    //使用 static 关键字，可以定义静态属性
    //所谓的静态属性，就是可以通过类名，直接访问的属性
    //实例属性：只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name: 'zs', age: 20 }
}
//访问 Person 类身上的 info 静态属性
console.log(Person.info);
例2：
//Java C# 实现面向对象的方式完全一样了，class 是从后端语言中借鉴过来的，来实现面向对象
//var p1 = new Person()
//function Animal(name) {
//  this.name = name
//}
//Animal.info = 123
//var a1 = new Animal('小花')
//这是静态属性：
//console.log(Animal.info)
//这是实例属性
//console.log(al.name)

webpack的插件版本配置

"dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1",
    "vue": "^2.6.9"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^1.0.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^3.1.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.20.1",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.6.8",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }