webpack介绍

6.1 webpack概念的引入

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

　　.js、 .jsx 、.coffee、 .ts（TypeScript 类 C# 语言）

　　.css、 .less、 .sass 、.scss

Images

　　.jpg 、.png、 .gif 、.bmp 、.svg

字体文件（Fonts）

　　.svg、 .ttf、 .eot、 .woff、 .woff2

模板文件

　　.ejs 、.jade、 .vue（这是在webpack中定义组件的方式，推荐这么用）

　　说明：SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。

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

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系；

　　如何解决上述两个问题？

合并、压缩、精灵图（雪碧图）、图片的Base64编码；
处理依赖关系可以使用requireJS、也可以使用webpack解决各个包之间的复杂依赖关系；

　　对应的技术方案：

使用Gulp进行压缩合并，它是基于 task 任务的；
使用Webpack，它是基于整个项目进行构建的；

　　说明：并不是所有的图片都适合采用Base64编码，通常只有一些小图片适合这样做。

　　如果我们的项目比较大的情况下，使用Gulp，会创建许多的task任务，比较麻烦。所以它通常适合一些小的模块构建。

　　什么是精灵图？

　　css精灵(CSS sprites)是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中。

　　什么是webpack?

　　webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

webpack官网地址：http://webpack.github.io/。

6.2 webpack-最基本的使用方式

　　webpack安装的两种方式

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

　　接下来，我们通过一个隔行变色的示例来演示webpack的基本使用。首先安装webpack，然后新建一个项目，目录如下图所示：

　　我们经常从网上下载一些第三方的安装包的时候，也经常会看到dist目录和src目录，dist目录是编译后的文件目录，src是源码目录。main.js这是项目的核心文件，全局的配置都在这个文件里面配置，index.html是首页入口文件。

　　1. 安装webpack：npm i webpack-g

　　查看webpack版本：

　　C:\Users\zouqi>webpack -v

　　4.30.0

　　2. 安装jquery

　　npm i jquery -S

　　index.html代码如下：

<div id="app">
        <ul>
            <li>冯锡范---一剑无血</li>
            <li>陈近南---平生不见陈近南，便称英雄也枉然</li>
            <li>胡逸之---百胜刀王</li>
            <li>九难师太---独臂神尼</li>
        </ul>
    </div>
    <script src="./main.js"></script>

　　main.js代码如下：

import $ from 'jquery'
$(function () {
  $('li:odd').css('backgroundColor', 'lightblue')
  $('li:even').css('backgroundColor', 'lightgreen')
})

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

　　例如：import $ from ‘jquery’等价于：

　　import $ from ‘/node_modules/jquery/dist/jquery.js’

　　此时，我们在浏览器中运行index.html，我们看下效果：

我们会发现隔行变色无效，并且控制台报错了。这是因为 import xx from xx 是ES6中导入模块的方式，而 ES6的代码太高级了，浏览器解析不了，所以这一行执行会报错，如果想要浏览器能够解析ES6的代码，我们可以将其通过webpack编译为浏览器可以解析的正常js语法。

　　3.运行webpack打包

　　webpack ./src/main.js –output-filename ./bundle.js –mode development

　　解析：通过 webpack 这么一个前端构建工具，把 main.js 做了一下处理，生成了一个 bundle.js 的文件。

　　运行结果如下所示：

PS D:\WorkSpace\vue_book\codes\chapter6\webpack-learn>
webpack ./src/main.js --output-filename ./bundle.js --mode development
Hash: 57bb64f9c2f92092305b
Version: webpack 4.30.0
Time: 381ms
Built at: 2019-05-08 20:30:17
      Asset     Size  Chunks             Chunk Names
./bundle.js  314 KiB    main  [emitted]  main
Entrypoint main = ./bundle.js
[./src/main.js] 138 bytes {main} [built]
    + 1 hidden module

　　命令格式： webpack 要打包的文件的路径打包好的输出文件的路径打包模式（webpack4新增）

　　4. 修改index.html中的js引用

<!– <script src=”./main.js”></script> –>

　　运行结果如下：

　　我们发现，在index.html中，我们只需要引入打包后的bundle.js这个文件，如果不采用webpack打包，我们直接在index.html页面中引入文件，至少要引入两个，一个是jquery.js，一个是main.js，而且这两个文件我们可能还要单独去进行代码压缩。

　　注意：

　　不推荐直接在index.html里引用任何包和任何CSS文件，而应该在main.js中通过import引用。

　　每次我们修改了main.js中的代码，都需要重新运行webpack命令进行打包，代码才会生效。因为我们index.html中最终引用的是bundle.js文件。

　　经过上面的示例，Webpack 可以做什么事情？

　　1. webpack 能够处理 JS 文件的互相依赖关系。

　　2. webpack 能够处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能正常识别的语法。

6.3 webpack-最基本的配置文件的使用

在前面的示例中，我们发现每次都要运行webpack 要打包的文件的路径打包好的输出文件的路径打包模式，这样执行起来非常繁琐。我们可以通过配置文件来让操作变得更加简单。

如果不做任何配置，直接运行命令webpack，会出现如下错误提示：

webpack
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

在项目根目录下创建一个webpack.config.js(默认，可修改)文件来配置webpack。这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象，其代码结构如下：

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 处理对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开发服务器配置
    mode: 'development'      // 模式配置
}

　　由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径。根据项目的代码结构，我们来写一下最基本的webpack配置：

// 导入处理路径的模块
const path = require("path");
// 导出一个配置对象
module.exports = {
  entry: path.join(__dirname, "./src/main.js"), // 项目入口文件
  output: { // 配置输出选项
    path: path.join(__dirname, "./dist"), // 配置输出的路径
    filename: "bundle.js" // 配置输出的文件名
  },
  mode: "development" // 模式配置
};

　　然后再来运行webpack，这次，我们发现运行成功了，运行结果和前面执行：webpack ./src/main.js –output-filename ./bundle.js –mode development 命令是一样的。

　　思考： 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了什么？

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

　　2. 于是webpack 就会去项目的根目录中查找一个叫做 “webpack.config.js”的配置文件。

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

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

6.4 webpack-dev-server的基本使用

假设我们每次修改了main.js中的代码，我们都需要手动运行webpack打包的命令，然后去刷新浏览器才能看到最新的代码效果，这样操作起来很麻烦，我们希望有那种“热更新”的机制，当修改代码之后，会自动进行打包构建，然后马上能够在浏览器中看到最新的运行效果。

　　所谓热替换,就是在不刷新网页的情况下,改变代码后,会自动编译并更新页面内容。

　　我们可以使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。

　　安装

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

　　安装完成之后，直接在控制台运行：webpack-dev-server，会报错：

　　webpack-dev-server : 无法将“webpack-dev-server”项识别为 cmdlet、函数、脚本
　　文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

这是因为我们是在项目中进行本地安装的 webpack-dev-server ，所以无法把它当作脚本命令，在powershell 终端中直接运行（只有那些安装到全局-g 的工具，才能在终端中正常执行）。此时我们需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令。

　　修改package.json中scripts下面的dev节点，将”webpack –mode development”修改为”webpack-dev-server”。

  "scripts": {
    "dev": "webpack-dev-server",

　　注意： webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装 webpack。package.json属于json文件，而json文件中是不能写注释的哦。

　　webpack4.x将CLI抽离出为单独的包webpack-cli,需要npm install webpack-cli -D单独全局安装不然无法进行编译。

　　运行命令：npm install webpack webpack-cli webpack-dev-server --save-dev 进行安装。

　　执行运行：npm run dev，运行结果如下所示：

npm run dev
> webpack-learn@1.0.0 dev D:\WorkSpace\vue_book\codes\chapter6\webpack-learn
> webpack-dev-server
i ｢wds｣: Project is running at http://localhost:8080/

　　就可以http://localhost:8080访问了，此时访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，由于此时引用不到bundle.js文件，所以需要修改index.html中script的src属性为/bundle.js。

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

　　webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js;。webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为，它和 dist、src 、node_modules 平级，只是看不见，它的文件叫做 bundle.js。

　　把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快。

　　更多内容请移步至：《Vue.js 2.x实践指南》已出版

本文链接：https://www.cnblogs.com/jiekzou/p/13153662.html

webpack介绍—上

6.1 webpack概念的引入

6.2 webpack-最基本的使用方式

6.3 webpack-最基本的配置文件的使用

6.4 webpack-dev-server的基本使用

webpack介绍—上的更多相关文章

随机推荐

热门专题

目录导航