Webpack在Vue CLI中的应用

webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。

而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压缩、异步加载、模块化管理等等，初学者做初步了解就可以。接下来开始介绍webpack在vue项目中的配置和功能。

1. 与 vue-cli 2.x 的差异

如果你使用过 vue-cli 2.x，那么你应该了解其构建出的目录会包含相应的 webpack 配置文件，但是在 vue-cli 3.x 中你却见不到一份关于 webpack 的配置文件，难道 3.x 抛弃了 webpack？其实不然，3.x 提供了一种开箱即用的模式，即你无需配置 webpack 就可以运行项目，并且它提供了一个 vue.config.js 文件来满足开发者对其封装的 webpack 默认配置的修改

2. vue.config.js 的配置

a. baseurl

在前面的文章中，通过 vue-cli 3.x 成功构建并在浏览器中打开 http://localhost:8080/ 展示了项目首页。如果现在你想要将项目地址加一个二级目录，比如：http://localhost:8080/vue/，那么我们需要在 vue.config.js 里配置 baseurl 这一项：

// vue.config.js
module.exports = {
    ...
    
    baseUrl: 'vue',
    
    ...
}

其改变的其实是 webpack 配置文件中 output 的 publicPath 项，这时候你重启终端再次打开页面的时候我们首页的 url 就会变成带二级目录的形式。

b. outputDir

如果你想将构建好的文件打包输出到 output 文件夹下（默认是 dist 文件夹），你可以配置：

// vue.config.js
module.exports = {
    ...
    
    outputDir: 'output',
    
    ...
}

然后运行命令 yarn build 进行打包输出，你会发现项目跟目录会创建 output 文件夹， 这其实改变了 webpack 配置中 output 下的 path 项，修改了文件的输出路径。

c. productionSourceMap

该配置项用于设置是否为生产环境构建生成 source map，一般在生产环境下为了快速定位错误信息，我们都会开启 source map：

// vue.config.js
module.exports = {
    ...
    
    productionSourceMap: true,
    
    ...
}

该配置会修改 webpack 中 devtool 项的值为 source-map。

开启 source map 后，我们打包输出的文件中会包含 js 对应的 .map 文件，其用途可以参考：JavaScript Source Map 详解

d. chainWebpack

chainWebpack 配置项允许我们更细粒度的控制 webpack 的内部配置，其集成的是 webpack-chain 这一插件，该插件可以让我们能够使用链式操作来修改配置，比如：

// 用于做相应的合并处理
const merge = require('webpack-merge');

module.exports = {
    ...
    
    // config 参数为已经解析好的 webpack 配置
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .tap(options =>
                merge(options, {
                  limit: 5120,
                })
            )
    }
    
    ...
}

以上操作我们可以成功修改 webpack 中 module 项里配置 rules 规则为图片下的 url-loader 值，将其 limit 限制改为 5M，修改后的 webpack 配置代码如下：

{
    ...
    
    module: {
        rules: [
            {   
                /* config.module.rule('images') */
                test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
                use: [
                    /* config.module.rule('images').use('url-loader') */
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 5120,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    }
    
    ...
}

这里需要注意的是我们使用了 webpack-merge 这一插件，该插件用于做 webpack 配置的合并处理，这样 options 下面的其他值就不会被覆盖或改变。

e. configureWebpack

除了上述使用 chainWebpack 来改变 webpack 内部配置外，我们还可以使用 configureWebpack 来进行修改，两者的不同点在于 chainWebpack 是链式修改，而 configureWebpack 更倾向于整体替换和修改。示例代码如下：

// vue.config.js
module.exports = {
    ...
    
    // config 参数为已经解析好的 webpack 配置
    configureWebpack: config => {
        // config.plugins = []; // 这样会直接将 plugins 置空
        
        // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空
        return {
            plugins: []
        }
    }
    
    ...
}

configureWebpack 可以直接是一个对象，也可以是一个函数，如果是对象它会直接使用 webpack-merge 对其进行合并处理，如果是函数，你可以直接使用其 config 参数来修改 webpack 中的配置，或者返回一个对象来进行 merge 处理。

你可以在项目目录下运行 vue inspect 来查看你修改后的 webpack 完整配置，当然你也可以缩小审查范围，比如：

# 只查看 plugins 的内容
vue inspect plugins

f. devServer

vue.config.js 还提供了 devServer 项用于配置 webpack-dev-server 的行为，使得我们可以对本地服务器进行相应配置，我们在命令行中运行的 yarn serve 对应的命令 vue-cli-service serve 其实便是基于 webpack-dev-server 开启的一个本地服务器，其常用配置参数如下：

// vue.config.js
module.exports = {
    ...
    
    devServer: {
        open: true, // 是否自动打开浏览器页面
        hot: true, // 启用热模块替换，在代码变更时，页面会自动更新。
        port: 8080, // 端口地址
        https: true, // 启用 HTTPS
        https: false, // 使用https提供服务
        proxy: {
          //用于设置代理，以解决跨域问题。可以将请求代理到其他服务器。
          '/api': {
            target: 'http://localhost:3000', // 目标服务器
            changeOrigin: true, // 允许跨域
            pathRewrite: { '^/api': '' }, // 重写路径
          },
        },
        
        // 提供在服务器内部的其他中间件之前执行自定义中间件的能力
        before: (app) => {
          app.get('/api/custom', (req, res) => {
            res.json({ message: 'Custom API response' });
          });
        },
    
    ...
}

以上讲解了 vue.config.js 中一些常用的配置项功能，具体的配置实现需要结合实际项目进行，完整的配置项可以查看：vue.config.js

拓展1

1.什么是webpack-merge

webpack-merge 是一个用于合并多个 Webpack 配置文件的工具。它通常用于将基本配置与特定环境（如开发、生产）或功能集（如加载器、插件等）的配置进行合并，便于在不同环境下灵活调整 Webpack 配置。

假设我们有一个基本的 Webpack 配置 webpack.base.js 和一个开发特定的配置 webpack.dev.js。

1. 基础配置 (webpack.base.js)

// webpack.base.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

2. 开发配置 (webpack.dev.js)

// webpack.dev.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    contentBase: './dist',
  },
});

3. 生产配置 (webpack.prod.js)

// webpack.prod.js
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

module.exports = merge(baseConfig, {
  mode: 'production',
  optimization: {
    minimize: true,
  },
});

运行构建

在 package.json 中配置 scripts 以运行不同的构建：

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

现在，您可以使用以下命令来构建项目：

• 开发环境： npm run build:dev
• 生产环境： npm run build:prod

合并细节

webpack-merge 提供了多种合并策略：

• merge: 简单合并，后面的配置会覆盖前面的配置。
• smartMerge: 智能合并，避免重复合并相同的内容。
• unique: 合并数组时去重。

2.configureWebpack和chainWebpack的区别

在 Vue CLI 项目中，configureWebpack 和 chainWebpack 是用于自定义 Webpack 配置的两个不同方法。它们各自有不同的特点和适用场景。

1. configureWebpack

• 用途: 用于直接修改 Webpack 配置对象。适用于简单的配置修改。
• 使用方式: 你可以在 vue.config.js 文件中设置 configureWebpack 属性，可以是一个对象或一个返回配置对象的函数。

示例

// vue.config.js
const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    plugins: [
      // 添加自定义插件
    ],
  },
};

或者使用函数：

module.exports = {
  configureWebpack: (config) => {
    // 修改配置
    config.devtool = 'source-map'; // 仅示例，实际可根据需要修改
  },
};

2. chainWebpack

• 用途: 通过链式 API 修改 Webpack 配置，提供更多的灵活性和控制能力。适用于更复杂的配置场景，例如修改现有插件或加载器的选项。
• 使用方式: 在 vue.config.js 中设置 chainWebpack 属性，它是一个接受 webpack-chain 实例作为参数的函数。

示例

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 修改现有的规则
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改选项
        return {
          ...options,
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
          },
        };
      });

    // 添加新的插件
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'My App';
        return args;
      });
  },
};

1. .config.module

• 定义: config.module 访问到 Webpack 的模块配置部分。
• 功能: 在这里可以定义和修改模块的加载规则。

2. .rule('vue')

• 定义: rule('vue') 用于访问处理 .vue 文件的规则。Vue 文件是 Vue.js 框架的组件文件，通常包含模板、脚本和样式。
• 功能: 这里的 vue 表示的是该规则的名称，即用于处理 Vue 单文件组件。

3. .use('vue-loader')

• 定义: use('vue-loader') 表示访问该规则中使用的 vue-loader 加载器。
• 功能: vue-loader 是一个专门用于处理 Vue 单文件组件的加载器，负责将 Vue 文件中的内容解析为可被浏览器理解的 JavaScript、HTML 和 CSS。

4. .tap(options => { ... })

• 定义: tap 是一个用于修改加载器选项的方法。
• 功能: 通过 tap，可以获取当前 vue-loader 的配置选项，并进行修改。

5. return { ...options, loaders: { ... } }

• 展开运算符: ...options 用于将现有的加载器选项展开，确保保留原有的配置。
• 修改加载器: 在返回的对象中，添加或修改了 loaders 属性，特别是对 scss 文件的处理。这里设置了使用链式加载器：
  • vue-style-loader: 将样式注入到 DOM 中。
  • css-loader: 解析 CSS 文件。
  • sass-loader: 将 SCSS 文件转换为 CSS。

主要区别

何时使用

• 使用 configureWebpack: 当你需要简单地添加一个插件、设置路径别名或修改一些基础配置时，可以使用 configureWebpack。
• 使用 chainWebpack: 当你需要对现有的配置进行细致的修改、删除、替换或在条件下进行配置时，选择 chainWebpack 会更合适。

3. 默认插件

通过对 vue.config.js 的了解，我们知道了 vue-cli 3.x 为我们默认封装了项目运行的常用 webpack 配置，那么它给我们提供了哪些默认插件，每一个 plugin 又有着怎样的用途呢？除了使用 vue inspect plugins 我们还可以通过运行 vue ui 进入可视化页面查看，步骤如下：

• 打开可视化页面，点击对应项目进入管理页面（如果没有对应项目，需要导入或新建）

• 点击侧边栏 Tasks 选项，再点击二级栏 inspect 选项

• 点击 Run task 按钮执行审查命令

最后我们从输出的内容中找到 plugins 数组，其包含了如下插件（配置项已经省略，增加了定义插件的代码）：

// vue-loader是 webpack 的加载器，允许你以单文件组件的格式编写 Vue 组件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// webpack 内置插件，用于创建在编译时可以配置的全局常量
const { DefinePlugin } = require('webpack');

// 用于强制所有模块的完整路径必需与磁盘上实际路径的确切大小写相匹配
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

// 识别某些类型的 webpack 错误并整理，以提供开发人员更好的体验。
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

// 将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 用于在 webpack 构建期间优化、最小化 CSS文件
const OptimizeCssnanoPlugin = require('optimize-css-assets-webpack-plugin');

// webpack 内置插件，用于根据模块的相对路径生成 hash 作为模块 id, 一般用于生产环境
const { HashedModuleIdsPlugin } = require('webpack');

// 用于根据模板或使用加载器生成 HTML 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 用于在使用 html-webpack-plugin 生成的 html 中添加 <link rel ='preload'> 或 <link rel ='prefetch'>，有助于异步加载
const PreloadPlugin = require('preload-webpack-plugin');

// 用于将单个文件或整个目录复制到构建目录
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        /* config.plugin('vue-loader') */
        new VueLoaderPlugin(), 
        
        /* config.plugin('define') */
        new DefinePlugin(),
        
        /* config.plugin('case-sensitive-paths') */
        new CaseSensitivePathsPlugin(),
        
        /* config.plugin('friendly-errors') */
        new FriendlyErrorsWebpackPlugin(),
        
        /* config.plugin('extract-css') */
        new MiniCssExtractPlugin(),
        
        /* config.plugin('optimize-css') */
        new OptimizeCssnanoPlugin(),
        
        /* config.plugin('hash-module-ids') */
        new HashedModuleIdsPlugin(),
        
        /* config.plugin('html') */
        new HtmlWebpackPlugin(),
        
        /* config.plugin('preload') */
        new PreloadPlugin(),
        
        /* config.plugin('copy') */
        new CopyWebpackPlugin()
    ]
}

我们可以看到每个插件上方都添加了使用 chainWebpack 访问的方式，同时我也添加了每个插件相应的用途注释，需要注意的是要区分 webpack 内置插件和第三方插件的区别，如果是内置插件则无需安装下载，而外部插件大家可以直接访问：npm | Home 搜索对应的插件，了解其详细的 api 设置。

拓展2

1.vue.config.js 中还有哪些配置

1. publicPath

• 作用: 指定应用的根 URL，通常用于设置基础路径。默认情况下为 '/'。

• 示例:

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/',
  };

2. outputDir

• 作用: 指定构建输出目录，默认值为 dist。

• 示例:

  module.exports = {
    outputDir: 'build', // 输出到 build 目录
  };

3. assetsDir

• 作用: 指定静态资源的目录，默认值为 ''。

• 示例:

• module.exports = {
    outputDir: 'build', // 输出到 build 目录
  };

4. indexPath

• 作用: 指定生成的 index.html 文件的输出路径，默认值为 index.html。

• 示例:

  module.exports = {
    indexPath: 'main.html', // 输出为 main.html
  };

5. lintOnSave

• 作用: 在开发期间是否启用 ESLint，默认为 true。

• 示例:

  module.exports = {
    lintOnSave: false, // 禁用 ESLint
  };

6. configureWebpack

• 作用: 用于直接修改 Webpack 配置。

• 示例:

module.exports = {
  configureWebpack: {
    plugins: [
      // 自定义插件
    ],
  },
};

7. chainWebpack

• 作用: 使用 Webpack Chain API 进行更详细的配置。

• 示例:

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改选项
        return { ...options, loaders: { scss: 'vue-style-loader!css-loader!sass-loader' } };
      });
  },
};

8. devServer

• 作用: 用于配置开发服务器的行为。

• 示例:

module.exports = {
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
};

9. transpileDependencies

• 作用: 指定需要转译的依赖，通常用于支持 ES6+ 的第三方库。

• 示例:

module.exports = {
  transpileDependencies: ['some-library'],
};

10. productionSourceMap

• 作用: 在生产环境是否生成 source maps，默认为 true。

• 示例:

module.exports = {
  productionSourceMap: false, // 禁用生产环境的 source map
};

11. css

• 作用: 用于配置 CSS 相关的选项，如模块化、预处理器等。

• 示例:

module.exports = {
  css: {
    modules: true, // 启用 CSS 模块
    sourceMap: true, // 启用 CSS source maps
  },
};

12. pluginOptions

• 作用: 用于配置额外的插件选项，通常与 Vue CLI 插件一起使用。

• 示例:

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
    },
  },
};

2.使用 chainWebpack获取到 webpack 中的某一插件后，如何修改其配置

示例：修改 HtmlWebpackPlugin 的配置

假设我们想要修改 HtmlWebpackPlugin 的配置，比如设置模板文件路径或添加一些选项。可以按照以下步骤进行：

1. 使用 chainWebpack 方法：在 vue.config.js 中定义 chainWebpack 方法。

2. 获取插件实例：使用 config.plugin 方法获取到指定的插件。

3. 修改配置：通过调用 .tap() 方法来修改插件的选项。

以下是一个完整的示例：

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 修改 HtmlWebpackPlugin 的配置
    config.plugin('html')
      .tap(args => {
        // args 是传递给 HtmlWebpackPlugin 的参数数组
        args[0].title = 'My Custom Title'; // 修改页面标题
        args[0].template = './public/my-template.html'; // 指定自定义模板
        return args; // 返回修改后的参数
      });
  },
};

要点说明

• 获取插件：使用 config.plugin('pluginName') 获取到指定的插件实例。在此示例中，'html' 是 HtmlWebpackPlugin 的名称，通常是根据插件在 Webpack 配置中注册的名称。

• 使用 .tap() 方法：此方法接收一个函数，函数的参数是传给插件的原始参数数组，您可以在此数组中做出修改。

• 返回修改后的参数：最后，需要返回修改后的参数数组，以便插件使用。

修改其他插件

类似的方法可以用于修改其他 Webpack 插件的配置。例如，若要修改 MiniCssExtractPlugin 的配置，可以使用如下方式：

config.plugin('extract-css')
  .tap(args => {
    args[0].filename = 'custom.css'; // 修改输出的 CSS 文件名
    return args;
  });