webpack4学习笔记---系列1

时间  2019-12-06
标签 webpack4 webpack 学习 笔记 系列 繁體版
原文   原文链接

webpack到底是什么？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部建立一个依赖图(dependency graph)，用于映射到项目须要的每一个模块，而后将全部这些依赖生成到一个或多个bundle。css

注：webpack不是一个JS编译器，而是模块打包工具(并不只仅是JS模块的打包工具，还支持CSS、图片等文件)；html

webpack支持的JS规范主要有ES Moudule、CommonJS、CMD、AMD等。
复制代码

以上规范举几个例子：前端

  • ES2015 import 语句(ES6语法)
  • CommonJS require() 语句 ==> 异步引入 ，require.resolve() ==>同步方式获取模块ID
  • AMD define 和 require 语句，define导出方式不能在异步函数中调用
  • css/sass/less 文件中的 @import 语句。
  • 样式(url(...))或 HTML 文件中的图片连接(image url)

提升webpack打包速度的两个方法：vue

（1）保持node.js的版本比较新

（2）保持webpack版本比较新
复制代码

这是由于新版本的webpack会利用node的新特性来提升它的打包速度。node

webpack的正确安装方式

正常webpack的安装方式有两种：全局安装和本地项目安装react

（1）使用如下命令行进行webpack全局安装webpack

npm install webpack webpack-cli -g
复制代码

（2）使用如下命令行进行本地项目安装git

npm install webpack webpack-cli -D
复制代码

以上命令至关于：github

npm install webpack webpack-cli --save-dev
复制代码

当要选择webpack版本时，使用npm install webpack@版本 -D进行安装，这样即可以在不一样项目切换使用webpack版本。web

注意：当咱们有其余项目须要使用到webpack3或者比较老的版本的话，若是直接使用当前的webpack命令执行打包的话会出错，这是由于当前webpack使用的是全局安装下的webpack命令，解决方法是卸载原先在全局安装webpack和webpack-cli，在本地项目进行方式（2）安装。

检查：怎么检查安装是否成功呢？

当咱们使用webpack -v时会输出以下提示说当前全局没有webpack，能够安装webpack-cli脚手架来使用

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
复制代码

此处要想使用当前项目的webpack命令，则须要加上npx，以下：

npx webpack -v
npx webpack-cli -v
复制代码

如何简单使用webpack的配置文件？

webpack底层已经帮咱们封装好不少默认配置，当咱们没有本身手动去配置时，则会使用默认配置，可是在一个比较复杂的项目下，咱们通常但愿使用根据咱们需求配置好的文件来更改webpack的默认配置，简单步骤以下：

（1）建立webpack的默认配置文件webpack.config.js

（2）修改webpack的默认配置，代码以下：

const path = require('path');

module.exports = {
  // 配置webpack打包的入口文件
  entry: './index.js',
  // 配置webpack打包的输出文件
  output: {
    // 配置打包完成后的文件名
    filename: 'bundle.js',
    // 配置打包完成后的文件存放目录(绝对路径)
    path: path.resolve(__dirname, 'bundle')
  }
}
复制代码

（3）执行命令,进行打包

npx webpack
复制代码

(4)当咱们有需求不想使用webpack的默认配置文件名webpack.config.js时，好比咱们能够修改成webpackConfig.js，这时若是你执行打包命令则会报错，由于webpack不识别你当前的配置文件，而使用原先的默认配置文件，因此咱们须要使用如下命令让webpack以你当前配置文件为当前配置。

npx webpack --config webpackConfig.js
复制代码

(5）每次打包都要执行npx命令感受跟咱们之前学的不太像，能够在npm scripts中加入对应的打包命令来代替：

"scripts": {
    "bundle": "webpack"
  }
复制代码

接着执行以下打包命令：

npm run bunlde
复制代码

注意：你必定有个疑问，咱们执行打包命令为npx webpack，因此不是应该在scripts中配置成，"bundle":"npx webpack",否则会使用的全局webpack命令致使找不到？

这个是由于npm scripts的配置，由于在scripts中配置为webpack，执行打包命令后它会先在当前项目的node_modules下查找是否有webpack，没有的话再往上一级到全局node_modules去找。

webpack的三种使用方式

（1）在global全局下：

webpack index.js
复制代码

（2）在当前项目文件夹：

npx webpack index.js
复制代码

（3）使用webpack的配置文件+npm scripts中加入打包命令:

npm run bundle
复制代码

一个疑问：原先安装webpack-cli有什么做用？

（1）让咱们可以在命令行中，直接使用webpack命令

（2）在本地项目文件夹下，若是全局没有安装webpack，使用webpack会去全局查找webpack则报你没安装，而 只要你在本地项目中有装webpack，使用npx webpack能够找到本地webpack命令。

什么是loader？

当咱们在打包时引入的不只仅是js文件，好比能够是一个图片文件：

var avator = require('./avator.jpg');
复制代码

若是咱们还执行打包命令则会提示打包报错，由于webpack自己在默认配置下只会打包js文件，因此当咱们要想打包图片文件则要引入对应的loader并配置，使得webpack支持图片打包。

webpack打包图片须要借助file-loader配置：

（1）首先在本地项目安装file-loader：

npm install file-loader -D
复制代码

（2）在webpack.config.js配置使用file-loader规则：

module: {
    rules: [{
      // 正则匹配以.jpg结尾的文件
      test: /\.jpg$/,
      // 将匹配到的文件使用file-loader进行打包
        use: {
        loader: 'file-loader'
      }
    }]
  }
复制代码

（3）配置完成以后，使用打包命令打包：

npm run bundle
复制代码

总之，webpack不能识别打包除JavaScript 以外的静态资源，须要借助各类loader来预处理文件，使之可以打包除 JavaScript 以外的任何静态资源 。

图片打包番外篇

在开始以前先看一下咱们目前文件的目录结构，以下图：

上一小节中咱们可使用webpack将图片打包到dist目录下了，可是若是咱们想在index.html文件下加载打包的index.js文件，index.js文件中的代码以下： 

import avator from './avator.jpg';

var root = document.getElementById("root");
var img = new Image();
img.src = avator;
root.append(img);
复制代码

这里index.js中建立了一个img标签，并打包好的avator图片赋值到img的src上，挂载到root上显示。

接着在index.html文件中的代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片打包番外篇</title>
</head>
<body>
	<p>图片打包番外篇</p>
	<div id='root'></div>
	<script src='./../dist/bundle.js'></script>
</body>
</html>
复制代码

上述代码看着没问题，接下来执行打包命令，没有报错，一切看似都很ok的，可是当咱们在浏览器打开index.html时看到倒是这样的画面，以下图：

图片竟然找不到，这是啥缘由啊？

img.src = avator;  //6db51315be71c2bc73d1bc8663cc1ebc.jpg
复制代码

这是由于上面代码img的src属性上赋的值为打包后图片的名称加扩展名，这样子的话index.html在哪一个目录下引入打包后的bundle.js，就如上面index.html在src目录下引入了bunlde.js，当执行bundle.js就去src下找打包后的图片，结果找不到。反之！若是index.html在dist目录下的时候，恰巧打包后的图片也在该目录下，因此加载出来！

解决方法以下：

方式一：

将index.html移到dist打包目录下，修改index.html中引用bundle.js的路径为'./bundle.js',这样再打包一次，运行index.html图片就显示出来了。

方式二：

在不改变index.html位置下，直接在index.js文件中修改代码以下：

import avator from './avator.jpg';

var root = document.getElementById("root");
var img = new Image();
img.src = "./../dist/"+avator;
console.log("./../dist/"+avator)
root.append(img);
复制代码

这样的话，打包成功后，图片会被打包到dist目录下，在img的src属性下直接赋值dist目录下打包好的图片路径就能够找到图片了，而后显示在浏览器上。

使用Loader打包静态资源（图片篇）

file-loader

上面咱们用到了file-loader，可是并无比较详细的介绍这个loader，接下来就来看看file-loader的一些经常使用配置

（1）安装file-loader，安装时起初没注意直接安装了最新版3.0.1，可是新版本并无将它所需的依赖也安装进来，因此后面降级到2.0.0版本

npm install file-loader@2.0.0 -D
复制代码

（2）常见的选项和placeholders结合使用

use: {
        loader: 'file-loader',
        options: {
          // placeholders 占位符
          name: '[name]_[hash].[ext]',
          outputPath: 'images/'
        }
      }
复制代码

选项：

name：配置自定义文件名

outputPath：配置资源的输出目录

emitFile：只返回 public URL 但不会生成文件 ，默认值为true生成，false不生成
复制代码

placeholders：占位符

[name]：资源的基本名称

[hash]： 配置文件名的加密规则（默认MD5加密）

[ext]：资源的扩展名

[path]：资源相对于context的路径
复制代码

url-loader

url-loader跟file-loader很像，基本差很少，基本配置以下：

（1）安装

npm install url-loader -D
复制代码

（2）快速使用

use: {
        loader: 'url-loader',
        options: {
          // placeholders 占位符
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          // 20KB
          limit: 20480
        }
      }
复制代码

选项：

limit：单位为Byte，当超过这个大小限制的话就会生成文件，不然直接以base64格式嵌入url中

fallback：当文件超过limit限制时，使用对应的loader处理（默认是file-loader）
复制代码

url-loader与file-loader的区别

使用url-loader适用于图片文件比较小（几KB的那种），这样的话能够直接嵌入到url中，直接在浏览器js脚本运行时就加载，不用发送请求，可是若是图片文件过大的话，脚本加载过长，首屏显示就好久。

使用file-loader适用于图片文件比较大一点的，能够解决文件引用路径的问题 ，打包后生成对应的图片文件，在打开html在浏览器运行时发送一个请求，若是图片较多，会发不少http请求，会下降页面性能 。

使用Loader打包静态资源（样式篇）

基本的样式打包过程

webpack支持打包的静态资源不只是图片等文件，还能够是CSS、Less、Scss等样式文件，这时候就须要借助style-loader、css-loader、sass-loader来支持webpack打包，简单的例子以下：

（1）在src目录下建立index.scss，编写以下的sass样式：

body {
    .avator {
      width: 150px;
      height: 150px;
      transform: translate(100, 100);
    }
  }
复制代码

（2）在src目录下的index.js导入scss的样式并将class添加到对应图片的dom上，代码以下：

import avator from './avator.jpg';
import './index.scss'

var root = document.getElementById("root");
var img = new Image();
img.src = avator;
// 往img上添加avatorclass
img.classList.add('avator');
root.append(img);
复制代码

（3）在webpack.config.js文件中添加以下配置：

{
      test: /\.scss$/,
      use: [
        // 从下到上执行
        'style-loader',
        'css-loader',
        'sass-loader',
        'postcss-loader'
      ]
    }
复制代码

注意：这里的loader是从下到上执行的，若是写成一行的话是从右到左执行

（4）在sass文件的样式中咱们用到了transform，这个样式属性要支持各类浏览器的话要添加对应的浏览器厂商前缀,好比-webkit-等，这时咱们能够借助webpack的postcss-loader来给咱们自动添加厂商前缀，可是postcss-loader还须要建立本身的配置文件postcss.config.js而且加入autoprefixer插件，代码以下：

  • 安装style-loader、css-loader、sass-loader、postcss-loader、node-sass、autoprefixer：

    npm install -D style-loader css-loader sass-loader postcss-loader node-sass autoprefixer
复制代码

  • 在根目录下建立postcss.config.js文件并加入以下代码：

    module.exports = {
  plugins: [
    // 导入插件
    require('autoprefixer')
  ]
}
复制代码

（5）删除dist下的images文件夹和bundle.js，执行打包命令完成打包，打开html文件在浏览器运行选中对应的图片元素能够看到上面挂载了avator的class，而且在transform边上还添加了厂商前缀。

执行的大概流程

  1. 执行打包命令
  2. webpack匹配到scss样式文件
  3. 借助sass-loader打包
  4. 打包好的scss样式转给css-loader转译
  5. 转好的样式交给postcss-loader并借助autoprefixer插件自动添加相应的厂商前缀
  6. 添加好前缀的样式转给style-loader挂载到dom上的style里

嵌套scss样式问题

咱们可能在scss样式文件中又导入另一个scss样式文件，这样子的话若是按原先的执行顺序来执行，只能将第一个scss文件进行处理转译，另一个没转译，即postcss-loader和sass-loader只执行一次，解决方法就是让这两个loader再执行一次。

相关文件代码修改以下：

（1）在src目录下建立一个avator.scss文件，编写代码以下：

body {
    .avator {
      width: 220px;
      height: 150px;
    }
  }
复制代码

（2）在index.scss中导入avator.scss：

@import './avator.scss';

body {
  .avator {
    transform: translate(100px, 100px);
  }
}
复制代码

（3）webpack.config.js中须要修改为以下代码配置：

{
      test: /\.scss$/,
      use: [
        // 从下到上执行
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            // 让匹配到的scss样式文件都去走如下两个loader
            // 用于配置「css-loader 做用于 @import 的资源以前」有多少个 loader
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }
复制代码

如何使用css的模块化？

（1）首先咱们在前面的基础上封装一个createAvator.js，做用是建立头像，createAvator.js代码以下：

import avator from './avator.jpg';

export default function () {
  var root = document.getElementById("root");
  var img = new Image();
  img.src = avator;
  img.classList.add('avator');
  root.append(img);
}
复制代码

（2）在index.js中引入createAvator并调用：

import avator from './avator.jpg';
import createAvator from './createAvator';
import './index.scss';

// 调用建立头像
createAvator();

var root = document.getElementById("root");
var img = new Image();
img.src = avator;
img.classList.add('avator');
root.append(img);
复制代码

这时执行打包命令，运行index.html能够看到建立的两个图片头像都引用到了index.scss中的样式，index.scss中的样式就成了全局的样式了，如何解决这个问题，让css样式模块化？

（3）要让scss样式支持css module，则须要在webpack.config.js中的css-loader中配置参数module为true：

{
      test: /\.scss$/,  
      use: [
        // 从下到上执行
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            // 设置css-loader支持css 的modules
            modules:  true
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }
复制代码

（4）修改index.js中引入index.scss的方式，使用模块化的方式引入，代码以下：

import avator from './avator.jpg';
import createAvator from './createAvator';
import style from './index.scss';

createAvator();

var root = document.getElementById("root");
var img = new Image();
img.src = avator;
img.classList.add(style.avator);
root.append(img);
复制代码

（5）打包运行index.html能够看到两张图片头像显示不一样的样式，使用createAvator建立的头像没有使用index.scss的样式，若是要想让它也使用index.scss的样式则须要在createAvator.js中模块化导入index.scss并使用，代码以下：

import avator from './avator.jpg';
// 模块化引入index.scss,调用的时候才引用样式
import style from './index.scss';

export default function () {
  var root = document.getElementById("root");
  var img = new Image();
  img.src = avator;
  // 使img引用style中的avator样式
  img.classList.add(style.avator);
  root.append(img);
}
复制代码

webpack如何打包字体文件？

在实际项目应用中咱们可能须要用到字体的样式文件，一样webpack也支持打包咱们项目所需的字体样式文件，具体步骤以下：

（1）首先到iconfont阿里图标矢量库中添加几个图标到项目中，再下载对应的字体样式文件到本地

（2）在src目录下建立font文件夹，从下载下来的字体样式文件取以eot、svg、ttf、woff结尾的文件到font文件夹

（3）在index.scss中粘贴iconfot.css中的内容，修改引入路径，代码以下：

@font-face {
  font-family: "iconfont";
  src: url('./font/iconfont.eot?t=1543245201565'); /* IE9*/
  src: url('./font/iconfont.eot?t=1543245201565#iefix') format('embedded-opentype'), /* IE6-IE8 */
 // 此处去掉了base64的一段代码
  url('./font/iconfont.ttf?t=1543245201565') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./font/iconfont.svg?t=1543245201565#iconfont') format('svg'); /* iOS 4.1- */
}
复制代码

（4）在index.js中导入index.scss并建立对应的字体div，代码以下：

var root = document.getElementById('root');
import './index.scss';
// 这里的class必须是iconfont 图标的class名
root.innerHTML = '<div class="iconfont icon-changjingguanli"></div>';
复制代码

（5）在webpack.config.js中添加处理eot、svg、ttf结尾的文件打包的配置，代码以下：

{
      test: /\.(eot|svg|ttf)$/,
      use: {
        loader: 'file-loader'
      }
    }
复制代码

（6）打包运行index.html能够看到字体显示出来了

使用plugins让打包更快捷

html-webpack-plugin--自动建立Html

在咱们原先打包时，每次都要删掉dist目录下的除index.html，不能直接删除整个dist，那咱们能不能在每次打包以前直接将dist目录都直接删除，打包完成后自动生成符合咱们配置的index.html文件呢？

这就须要借助webpack的html-webpack-plugin了，基本使用步骤以下：

（1）安装html-webpack-plugin

npm install html-webpack-plugin -D
复制代码

（2）在webpack.config.js文件中引入html-webpack-plugin：

const HtmlWebPackPlugin = require('html-webpack-plugin');
复制代码

（3）在webpack.config.js中添加配置：

plugins: [
    // 建立插件实例，添加各项配置
    new HtmlWebPackPlugin({
     // 根据index.html模板建立dist下的index.html
      template: 'src/index.html'
    })
  ]
复制代码

注意：在咱们直接删除dist整个目录文件夹时，webpack打包完成后悔自动添加index.html并把打包好的bundle.js引入到script标签之中。

plugin的本质就像vue或者react的生命周期函数同样，能够在webpack运行到某个时刻的时候，自动帮你作一些事。

clean-webpack-plugin--打包前自动删除文件

咱们在上面一些操做中，每次都在打包前把dist下的文件手动删除，有没有好的工具能够帮咱们解决打包前自动删除dist文件夹及其底下全部文件？

答案确定是有的，须要借助webpack第三方plugin即clean-webpack-plugin，具体使用步骤以下：

（1）安装clean-webpack-plugin：

npm install clean-webpack-plugin -D
复制代码

（2）在webpack.config.js文件中引入clean-webpack-plugin：

const CleanWebpackPlugin = require('clean-webpack-plugin');
复制代码

（3）在webpack.config.js文件中配置plugins：

plugins: [
    // 建立插件实例，添加各项配置
    new HtmlWebPackPlugin({
      template: 'src/index.html'
    }),
     // 建立实例并传入要删除的文件夹
    new CleanWebpackPlugin(['dist'])
  ]
复制代码

对于SourceMap的几个理解

对于SourceMap是什么，咱们能够先作一个小实验来引出SourceMap，大概步骤以下：

（1）在src目录下将index.js代码所有去掉，添加一行代码：

consles.log("hello world");  // 这里故意将console打错
复制代码

（2）在webpack.config.js中mode设置为development 会自动打开sourceMap，所以咱们进行手动关闭：

// 手动将sourceMap关闭
  devtool: 'none',
复制代码

（3）执行打包命令，运行index.html打开控制台会报打包后的main.js的第96行代码出错，咱们点击main.js就会进入到打包后的main.js中排错，可是在实际中就算修改了main.js中代码，再次打包仍是错的，这是由于咱们只在打包好的代码修改，并无在源文件修改，所以咱们但愿控制台报错的时候给咱们提示的是源文件的报错信息，这时就要借助SourcMap的功能：

// 打开sourceMap功能
 devtool: 'source-map',
复制代码

（4）再次执行打包，控制台能够看到报错信息是在源文件的index.js中第一行console拼错了。

sourceMap就是创建起打包以后报错的代码与源文件代码之间的映射关系，主要在devtool里面进行配置，配置参数很是多，通常只用到比较常见的几个：
复制代码
  • source-map：会生成.map文件用于表示与源代码的映射关系，拖慢打包速度
  • inline-source-map：再也不生成.map文件而是将映射关系以base64形式存在打包后的文件中的data url中
  • cheap-inline-source-map：只关心源代码的报错，loader之中的报错无论，再也不提示咱们具体哪行哪列报错，而是只精确到行，打包速度比较快
  • cheap-module-source-map：不只源代码报错要管，还要管loader等之中的报错
  • eval：在打包后的文件最后一行输出简短的报错信息，速度很快

如上，devtool中的参数能够进行叠加使用，通常这样规定：

在development模式中，devtool使用cheap-module-eval-source-map

在production模式中，devtool使用cheap-module-source-map

使用webapckDevServer提高开发效率

在咱们使用webpack打包的时候，每次修改源代码文件以后都要再执行一次打包命令，这很是不方便，webpack能不能监听到源代码发生修改以后自动帮咱们再次打包？

强大的webpack给咱们提供了不少种方式，这里简要介绍两种：

（1）直接在package.json文件中的scripts中配置，执行npm run watch便可：

"scripts": {
    "watch": "webpack --watch"
  },
复制代码

（2）借助webpackDevServer

  • 安装webpack-dev-server

    npm install webpack-dev-server -D
复制代码

  • 在webpack.config.js文件中配置devServer：

    devServer: {
    // 告诉服务器从哪一个目录中提供内容
    contentBase: './dist',
    // 打包结束后自动启动浏览器进入localhost:8080下的页面
    open: true
  }
复制代码

  • 在package.json文件中的scripts中配置，执行npm run start启动服务：

    "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  }
复制代码

    注意：在webpackDevServer时还能够配置代理转发，好比：

    module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};
复制代码

    以上代理的意思是当请求到/api/xxx时会代理到请求http://localhost:3000/api/xxx，这样子使咱们前端在数据mock时不须要使用Charles等代理工具。

    番外篇：结合express和webpack-dev-middleware集成webpack小型server

    在网上偶然看到webpack借助webpack-dev-middleware和express也能够集成相似webpackDevServer的小型Server，具体步骤以下：

    （1） 安装服务所需的包和依赖：

    npm install express webpack-dev-middleware -D
复制代码

    （2）在webpack.config.js文件中配置生成新文件所指向的路径即publicPath：

    // 配置webpack打包的输出文件
  output: {
    publicPath: '/',
    // 配置打包完成后的文件名
    filename: '[name].js',
    // 配置打包完成后的文件存放目录(绝对路径)
    path: path.resolve(__dirname, 'dist')
  }
复制代码

    （3）在package.json文件中的scripts中配置：

    "scripts": {
    "bundle": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "server": "node server.js"
  }
复制代码

    （4）在项目跟webpack.config.js同级目录下建立server.js，编写代码以下：

    const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleWare = require("webpack-dev-middleware");
// 引入webpack的配置文件
const config = require("./webpack.config");

// 导入配置文件建立webpack的编译器
const complier = webpack(config);

// 建立基于express的node web服务器
const app = express();

// express服务集成webpack-dev-middleware中间件
app.use(webpackDevMiddleWare(complier, {
  // 配置生成新文件所指向的路径，须要使用相对路径
  publicPath: config.output.publicPath
}));

// 启动sever时监听3000端口
app.listen(3000, ()=> {
  console.log("server is running");
})
复制代码

    （5）执行npm run server运行服务，并在浏览器输入localhost:3000进入页面

热模块更新HotModuleReplacementPlugin

在开发过程当中，特别是前端开发一些html和css样式的调整，咱们并不想刷新整个浏览器的页面，只是想webpack帮咱们覆盖掉咱们修改的那部分html和css代码，相似于局部刷新，热模块更新HotModuleReplacementPlugin可以很好地帮咱们解决这个问题，具体实现步骤以下：

（1）在webpack.config.js文件中配置处理导入css文件的打包处理方式：

{
      test: /\.css$/,
      use: [
        // 从下到上执行
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }
复制代码

（2）webpack.config.js文件中配置热更新：

// 热更新plugin是在webpack底下，全部要先引入webpack
const webpack = require('webpack');

// 在devServer中启用热更新
 devServer: {
    // 告诉服务器从哪一个目录中提供内容
    contentBase: './dist',
    // 打包结束后自动启动浏览器进入localhost:8080下的页面
    open: true,
    port: 8080,
    // 启用热模块更新
    hot: true,
    // 在html出现问题时不让webpack帮咱们自动刷新，而是直接给咱们报错
	hotOnly: true
  }

// 在plugins下建立plugin实例
new webpack.HotModuleReplacementPlugin()
复制代码

（3）在src目录下新建style.css文件，代码以下：

div:nth-of-type(odd) {
	background: blue;
}
复制代码

（4）src下新建index.js，代码以下：

import './style.css';
var btn = document.createElement('button');
btn.innerHTML = '新增';
document.body.appendChild(btn);

btn.onclick = function() {
	var div = document.createElement('div');
	div.innerHTML = 'item';
	document.body.appendChild(div);
}
复制代码

（5）执行npm run start启动服务，浏览器中点击新增按钮，发现奇数行的div为蓝色，咱们修改style.css的background颜色为green

div:nth-of-type(odd) {
	background: green;
}
复制代码

保存时回到浏览器发现建立的item个数还在，item的颜色也变成了绿色，实现css模块热更新。

注意：有时候咱们在js中要想实现js模块热更新，webpack也有对应的解决方式，以下例子：

（1）在src下新建counter .js、number.js和number1.js：

// counter .js
function counter() {
	var div = document.createElement('div');
	div.setAttribute('id', 'counter');
	div.innerHTML = 1;
	div.onclick = function() {
		div.innerHTML = parseInt(div.innerHTML, 10) + 1
	}
	document.body.appendChild(div);
}

export default counter;

// number.js
function number() {
	var div = document.createElement('div');
	div.setAttribute('id', 'number');
	div.innerHTML = 4000;
	document.body.appendChild(div);
}

export default number;

// number1.js
function number1() {
	var div = document.createElement('div');
	div.setAttribute('id', 'number1');
	div.innerHTML = 1000;
	document.body.appendChild(div);
}

export default number1;
复制代码

（2）清除index.js的代码添加以下代码：

import counter from './counter';
import number from './number';
import number1 from './number1';

counter();
number();
number1();

if(module.hot) {
	module.hot.accept('./number', () => {
		// 先将id选择器为number移除
		document.body.removeChild(document.getElementById('number'));
		// 建立div并设置id为number
		number();
	})

	module.hot.accept('./number1', () => {
		document.body.removeChild(document.getElementById('number1'));
		number1();
	})
}
复制代码

（3）webpack.config.js中的热更新已配置好，直接运行服务，浏览器打开先点击几下counter的计数器后修改number.js和number1.js中的div.innerHTML值，能够发现页面上number和number1的值都会变化可是counter值仍是保持在原先的计数值，并不会恢复成0。

在webpack下使用Babel处理ES6语法

如今ES6的一些语法已经逐渐代替了老版本的语法，可是一些浏览器还不能兼容ES6的一些新语法，使用Babel能够将ES6语法转换成ES5语法再让浏览器执行。

在webpack中使用Babel处理ES6的步骤以下：

（1）首先在index.js中编写须要转译的ES6代码：

const arr = [
	new Promise(() => {}),
	new Promise(() => {})
];

arr.map(item => {
	console.log(item);
});
复制代码

（2）安装babel-loader、 @babel/core、@babel/preset-env、@babel/polyfill：

npm install babel-loader @babel/core @babel/preset-env @babel/polyfill -D
复制代码

（3）配置webpack.config.js文件：

// 在module下配置
{
      test: /\.js$/,
      // 排除node_modules目录下的js文件
      exclude: /node_modules/,
      loader: "babel-loader",
      options: {
        "presets": [["@babel/preset-env", {
          // 配置babel/polyfill根据业务代码所用到的变量、函数才填充进去，这样打包的文件就比较小
          useBuiltIns: 'usage'
        }]]
      }
    }
复制代码

注意：这里的babel-loader只是创建起webpack与babel转译器的桥梁，咱们还须要告诉webpack编译的规则和环境，所以如上要配置presets

（4）若是此时直接执行npx webpack打包的话，发现打包后文件的末尾index.js代码仍是有一些变量、函数没有被转译，所以还须要在index.js导入@babel/polyfill弥补低版本浏览器一些变量、函数 ：

// index.js
// @babel/polyfill能够弥补低版本浏览器一些变量、函数
import "@babel/polyfill";
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程