Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）

不念不忘少年蓝@ 2024-02-05 13:15 15阅读 0赞

### ![a27efc1e6d1b45fd9ee97293ec8b9ccb.gif][] ###

**文章目录**

Webpack中模式(Mode)

Webpack中使用DevServer

配置快捷运行方案

开发模式与生产模式分离

Webpack中devtool增强调试过程

.browserslistrc文件说明

postcss-loader处理css兼容

Webpack构建React环境

Webpack构建Vue环境

--------------------

### Webpack中模式(Mode) ###

![9858d290818942bba5b7a34065947233.png][]

提供 **mode** 配置选项，告知 webpack 使用相应模式的内置优化。

'none'| 'development' | 'production'

<table> 
 <tbody> 
  <tr> 
   <td>选项&nbsp;</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>development</td> 
   <td>会将 <span style="color:#fe2c24;"><strong>DefinePlugin</strong></span> 中 <span style="color:#fe2c24;"><strong>process.env.NODE_ENV </strong></span>的值设置为 <span style="color:#fe2c24;"><strong>development </strong></span>. 为模块</td> 
  </tr> 
  <tr> 
   <td>production</td> 
   <td>会将 <span style="color:#fe2c24;"><strong>DefinePlugin</strong></span> 中 <span style="color:#fe2c24;"><strong>process.env.NODE_ENV</strong></span> 的值设置为 <span style="color:#fe2c24;"><strong>production</strong></span> 。为模块和<br><span style="color:#fe2c24;"><strong>FlagDependencyUsagePlugin</strong></span> ， <strong><span style="color:#fe2c24;">FlagIncludedChunksPlugin</span></strong> ， <strong><span style="color:#fe2c24;">ModuleConcatenati</span></strong><br><span style="color:#fe2c24;"><strong>TerserPlugin </strong></span>。</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不使用任何默认优化选项</td> 
  </tr> 
 </tbody> 
</table>

**实现模式(Mode)有两种方式：**  
第一种：只需在配置对象中提供 mode 选项

module.exports = {
     mode: 'development',
    };

第二种：从 CLI 参数中传递

webpack --mode=development

###  ###

### Webpack中使用DevServer ###

![9362e2a7b1424a6aacdc96a08f7af19d.png][]

到目前为止 webpack 基本上可以正常使用了，但在实际开发中你可能会需要：

> 1、提供 HTTP 服务而不是使用本地文件预览；
> 
> 2、监听文件的变化并自动刷新网页，做到实时预览；
> 
> 3、支持 Source Map，以方便调试。

对于这些， Webpack 都为你考虑好了。Webpack 原生支持上述第2、3点内容，结合官方提供的开发工具 DevServer 也可以很方便地做到第1点。 DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览

**安装服务器依赖**

npm install -g webpack-dev-server@4.9.2
    npm install --save-dev webpack-dev-server@4.9.2

**修改配置文件**

const path = require('path');
    module.exports = {
      devServer: {
        // 服务器打开目录
        static: path.join(__dirname,'public'),
        // 开启压缩
        compress: true,
        // 设置端口
        port: 9000,
        // 热更新
        hot: true,
        // 自动打开浏览器
        open: true,
        //使用 History 路由模式时，若404错误时被替代为 index.html
        historyApiFallback: true
     }
    };

> 服务器运行方式  
> 1、webpack serve  
> 2、webpack-dev-server

>  **温馨提示**  
> 修改配置文件的情况下，是无法热更新的，需要重启服务器，热更新只对代码剩下 **src**

### 配置快捷运行方案 ###

![cf499419a6654b1f812e9bb2a8dc3b2e.png][]

配置快捷运行方案可以方便我们统一运行方式，不然我们需要记忆更多关键词例如： **webpack 、 webpack serve 、 webpack-dev-server** 等等

**修改方案**  
在 **package.json** 中， **scripts** 中进行配置

"scripts": {
      "start": "webpack",
      "dev":"webpack serve"
    }

> **温馨提示**  
> 如果在 **package.json** 文件中，并没有找到 **scripts** ,可以通过执行 **npm init** 重新生成 **package.json** 文件

**运行方式**

npm start  // 相当于运行webpack
    npm run dev // 相当于运行webpack serve

### 开发模式与生产模式分离 ###

![581a99ef29bf45abaaea98d4a4974806.png][]

在开发的过程中，我们一般会将开发环境进行区分：

1、开发环境  
2、测试环境  
3、生产环境  
4、...

**开发模式**

开发模式是为开发者更方便开发而存在的，在开发模式下，一般是为了更方便的调试，所以错误信息会提示很全面，并且存在热更新状态等

**生产模式**

生产模式是为了项目打包上线而存在的，在生产模式下，会去掉更多的错误提示，让想打包尽可能变小等

**webpack 配置开发模式和生产模式**

在 **webpack** 中，我们可以区分开发模式和生产模式，例如 **mode** 就有 **development** 和 **production** 的区别

**安装依赖：**

**webpack-merge** 可以用来合并多个配置文件：

npm install --save-dev webpack-merge@5.8.0

**创建开发和生产模式文件**

在项目根目录下创建 **webpack.dev.config.js** 和 **webpack.prod.config.js** 文件

// webpack.dev.config.js
    const commonConfig = require("./webpack.config");
    const path = require('path');
    const { merge } = require("webpack-merge");
    const devConfig = {
      mode: 'development',
      devServer: {
        // 服务器打开目录
        static: path.join(__dirname,'public'),
       // 开启压缩
        compress: true,
        // 设置端口
        port: 9000,
        // 热更新
        hot: true,
        // 自动打开浏览器
        open: true,
        //使用 History 路由模式时，若404错误时被替代为 index.html
        historyApiFallback: true
     }
    }
    module.exports = merge(commonConfig,devConfig)

/ webpack.prod.config.js
    const commonConfig = require("./webpack.config");
    const { merge } = require("webpack-merge");
    const prodConfig = {
      mode: 'production'
    }
    module.exports = merge(commonConfig,prodConfig)

**重新配置运行方式**

"scripts": {
      "start": "webpack --config webpack.prod.config.js",
      "dev": "webpack-dev-server --config webpack.dev.config.js"
    }

###  ###

### Webpack中devtool增强调试过程 ###

![b82f9ed7b9a946c8b9c9bcfd2d56bc2c.png][]

我们可以通过 **devtool** 来设置增强调试过程  
通过设置 **devtool** 生成**source map**

**Source Map**

1、source map 是一个信息文件，里面存储着代码压缩前后的位置信息。  
2、即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试

开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题  
解决方案：在**webpack.dev.config.js**中添加如下配置，即可保证运行时报错的行数与源代码的行数**保持一致**

const commonConfig = require("./webpack.config");
    const { merge } = require("webpack-merge");
    const devConfig = {
      mode: 'development',
      //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致
      devtool:'source-map'
    }
    module.exports = merge(commonConfig,devConfig)

**Source Map 的最佳实践**

**开发模式下**  
建议直接把devtool 的值设置为 source-map ,可以直接定位到具体的错误行

**生产环境下**

建议关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map ,防止源码泄漏，提高网站的安全性

### .browserslistrc文件说明 ###

![645cd8f6af854c028f52ff94d1d7ba18.png][]

browserslistrc文件是为了表示当前项目的浏览器兼容情况  
使用方式有三种：

> 1、在package.json中设置  
> 2、设置成独立的配置文件  
> 3、某些插件需要重新设置browserslist

我们参考Vue项目的环境配置，选择第二种方式，设置成独立的配  
置文件  
在项目的根目录下创建 **.browserslistrc** 文件

> 1%  // 兼容市场上占有率超过1%的浏览器(世界级)
    last 2 versions  // 兼容浏览器最近的两个版本
    not dead // 不支持24个月内没有官方支持或者更新的浏览器
    not ie 11  // 不支持ie 11

### postcss-loader处理css兼容 ###

![1f211117676d4e849bb76d5494583aa8.png][]

postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。就是这个工具能给我们写的css代码添加一些兼容的前缀

**安装**

npm install --save-dev autoprefixer@10.4.7
    npm install --save-dev postcss@8.4.14
    npm isntall --save-dev postcss-loader@7.0.0
    npm install --save-dev postcss-preset-env@7.7.1

在项目根目录下创建 **postcss.config.js** 文件

// postcss.config.js
    module.exports = {
      plugins: {
        "autoprefixer":{
          "overrideBrowserslist":[
            // 兼容IE7以上浏览器
           "ie >= 8",
            // 兼容火狐版本号大于3.5浏览器
            "Firefox >= 3.5",
            // 兼容谷歌版本号大于35浏览器,
            "chrome >= 35"
         ]
       }
     }
    }

修改 **webpack.config.js** 文件

rules: [
     {
        test: /\.css$/,
        use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]
     },
     {
        test: /\.less$/,
        use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"]
     },
     {
        test: /\.(scss|sass)$/,
        use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"]
     }
    ]

**修改CSS文件**

.root{
      width: 400px;
      height: 200px;
      background-color: #f1f1f1;
      display: flex;
    }

![a15a2fbb51a847379c43cda31170f7a3.png][]

###  ###

### Webpack构建React环境 ###

![12c17277f66e45a58f57dc735864ae5e.png][]

目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目  
接下来，我们用 webpack 构架一个React项目的环境

**安装**

npm install -D @babel/preset-react@7.17.12
    npm install -S react@18.2.0
    npm install -S react-dom@18.2.0

**增加配置文件**

React使用的语法为 jsx 语法，所以我们需要配置 jsx 的解析模块

{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }

同时我们需要修改 **babel.config.js** 文件

module.exports = {
      presets: [
        '@babel/preset-env',
        "@babel/preset-react"
     ]
    }

**编写React代码**

import React from 'react'
    import ReactDom from 'react-dom'
    class App extends React.Component {
      render(){
        return (
          <div style={
       {color:"#333"}}>
           Hello
          </div>
       )
     }
    }
    ReactDom.render(<App/>,document.getElementById("root"))

###  ###

### Webpack构建Vue环境 ###

![583c943a9dca453aa45e380b273af09f.png][]

目前React和Vue两个最常用的前端框架都是使用Webpack进行构建项目  
接下来，我们用 **webpack** 构架一个Vue项目的环境

**安装**

Vue专属文件时 **.vue** ,我们需要一些包帮助去解析他

npm install --save vue@3.2.37
    npm install --save-dev vue-loader@17.0.0
    npm install --save-dev vue-style-loader@4.1.3
    npm install --save-dev vue-template-loader@1.1.0
    npm install --save-dev vue-template-compiler@2.6.14

**增加配置文件**

在 **webpack.config.js** 文件中

const { VueLoaderPlugin } = require('vue-loader')
    const baseConf = {
      module:{
     {
          test: /\.vue$/,
          use: ['vue-loader']
    }
    },
      plugins:[
        new VueLoaderPlugin()
     ]
    }

**编写Vue代码**

// index.js
    import { createApp } from 'vue'
    import App from './App.vue'
    createApp(App).mount('#root')

// App.vue
    <template>
     <p>Vue文件环境测试</p>
    </template>
    <script>
    export default {
    }
    </script>
    <style>
    p{
     color: red;
    }
    </style>

[a27efc1e6d1b45fd9ee97293ec8b9ccb.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/6277a6c29e324758bec5ff243c64d298.png
[9858d290818942bba5b7a34065947233.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/cae1c477a5244c1ca857b80bef1da4f9.png
[9362e2a7b1424a6aacdc96a08f7af19d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/50628848d5ff41af9a34ad9ea477e9e2.png
[cf499419a6654b1f812e9bb2a8dc3b2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/955d89f69f274af68e80b0f4cf6de609.png
[581a99ef29bf45abaaea98d4a4974806.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/f4a5b0f09a384d3f956ce02d94b37fa4.png
[b82f9ed7b9a946c8b9c9bcfd2d56bc2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/8be03ed072494752b6d6186d6a915d40.png
[645cd8f6af854c028f52ff94d1d7ba18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/3a07a8b283844f9b9db27002ab2c78ab.png
[1f211117676d4e849bb76d5494583aa8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/cbeb504ed6b74c1ab49b192e4adf8bef.png
[a15a2fbb51a847379c43cda31170f7a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/2805a1087b7349cdbb19eae9464d5210.png
[12c17277f66e45a58f57dc735864ae5e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/6df1509073fe44099093be772ca37fe9.png
[583c943a9dca453aa45e380b273af09f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/e93b26dccfc246a598d0f0782852abfb.png