本文共 12542 字，大约阅读时间需要 41 分钟。

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

• 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安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

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

1. 运行npm init初始化项目，使用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/js/main.js dist/bundle.js

使用webpack的配置文件简化打包时候的命令

1. 在项目根目录中创建webpack.config.js
2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

// 导入处理路径的模块    var path = require('path');    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理    module.exports = {        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件        output: { // 配置输出选项            path: path.resolve(__dirname, 'dist'), // 配置输出的路径            filename: 'bundle.js' // 配置输出的文件名        }    }

实现webpack的实时打包构建

1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
2. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖
3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

• 把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
• 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
• 为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

"dev": "webpack-dev-server --contentBase src"

同时修改index页面中script的src属性为<script src="bundle.js"></script>

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下：

// 导入处理路径的模块    var path = require('path');    // 导入自动生成HTMl文件的插件    var htmlWebpackPlugin = require('html-webpack-plugin');    module.exports = {        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件        output: { // 配置输出选项            path: path.resolve(__dirname, 'dist'), // 配置输出的路径            filename: 'bundle.js' // 配置输出的文件名        },        plugins:[ // 添加plugins节点配置插件            new htmlWebpackPlugin({                template:path.resolve(__dirname, 'src/index.html'),//模板路径                filename:'index.html'//自动生成的HTML文件的名称            })        ]    }

3. 修改package.json中script节点中的dev指令如下：

"dev": "webpack-dev-server"

4. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！

方式1：

• 修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

1. 修改webpack.config.js文件，新增devServer节点如下：

devServer:{        hot:true,        open:true,        port:4321    }

2. 在头部引入webpack模块：

var webpack = require('webpack');

3. 在plugins节点下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css文件

1. 运行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的        rules: [ // 文件的匹配规则            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则        ]    }

3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

使用webpack打包less文件

1. 运行cnpm i less-loader less -D
2. 修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass文件

1. 运行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

1. 运行cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

• webpack.config.js

const path = require('path')// 启用热更新的 第2步const webpack = require('webpack')// 导入在内存中生成 HTML 页面的 插件// 只要是插件，都一定要 放到 plugins 节点中去// 这个插件的两个作用：//  1. 自动在内存中根据指定页面生成一个内存的页面//  2. 自动，把打包好的 bundle.js 追加到页面中去const htmlWebpackPlugin = require('html-webpack-plugin')// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象module.exports = {
      // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口  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 // 启用热更新 的 第1步  },  plugins: [ // 配置插件的节点    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步    new htmlWebpackPlugin({
     // 创建一个 在内存中 生成 HTML  页面的插件      template: path.join(__dirname, './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 规则    ]  }}// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：//  1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口//  2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 的配置文件//  3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象//  4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口  和 出口，然后进行打包构建；

• main.js

// 这是 main.js 是我们项目的JS入口文件// 1. 导入 Jquery// import *** from *** 是ES6中导入模块的方式// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错import $ from 'jquery'// const $ = require('jquery')// 使用 import 语法，导入 CSS样式表import './css/index.css'import './css/index.less'import './css/index.scss'// 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D// 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；// 注意： webpack 处理第三方文件类型的过程：// 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则// 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；// 3. 在调用loader 的时候，是从后往前调用的；// 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到  bundle.js 中去$(function () {
      $('li:odd').css('backgroundColor', 'yellow')  $('li:even').css('backgroundColor', function () {
        return '#' + 'D97634'  })})// 经过刚才的演示，Webpack 可以做什么事情？？？// 1. webpack 能够处理 JS 文件的互相依赖关系；// 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法// 刚才运行的命令格式：    webpack  要打包的文件的路径  打包好的输出文件的路径// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖// 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样// 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）// 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;// 6. 我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的 根目录中，虽然我们看不到它，但是，可以认为， 和 dist  src   node_modules  平级，有一个看不见的文件，叫做 bundle.js

• index.html

  
     
     
       
     
     
     
     
     
     
     
     
     
   
    
    
这是第1个li
    
    
这是第2个li
    
    
这是第3个li
    
    
这是第4个li
    
    
这是第5个li
    
    
这是第6个li
    
    
这是第7个li
    
    
这是第8个li
    
    
这是第9个li
    
    
这是第10个li
  
   

使用babel处理高级JS语法

1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

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

4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

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

5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

• webpack.config.js

// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的var path = require('path')// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点var htmlWebpackPlugin = require('html-webpack-plugin')// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建module.exports = {
      entry: path.join(__dirname, './src/main.js'), // 入口文件  output: {
     // 指定输出选项    path: path.join(__dirname, './dist'), // 输出路径    filename: 'bundle.js' // 指定输出文件的名称  },  plugins: [ // 所有webpack  插件的配置节点    new htmlWebpackPlugin({
          template: path.join(__dirname, './src/index.html'), // 指定模板文件路径      filename: 'index.html' // 设置生成的内存页面的名称    })  ],  module: {
     // 配置所有第三方loader 模块的    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      {
     test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串      {
     test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader       {
     test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法    ]  }}

• main.js

// 项目的JS入口文件console.log('ok')import './css/index.css'import './css/index.scss'// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找import 'bootstrap/dist/css/bootstrap.css'// class 关键字，是ES6中提供的新语法，是用来 实现 ES6 中面向对象编程的方式class Person {
      // 使用 static 关键字，可以定义静态属性  // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性  // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性  static info = {
     name: 'zs', age: 20 }}// 访问 Person 类身上的  info 静态属性console.log(Person.info)// 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法// 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 写如下的配置：  大家可以把 preset 翻译成 【语法】 的意思        // {
            //   "presets": ["env", "stage-0"],        //   "plugins": ["transform-runtime"]        // }// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法// 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(a1.name)

• .babelrc

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

相关文章

转载地址：http://onxmi.baihongyu.com/