webpack指南（项目篇）——webpack在项目中的运用

系列文章目录

webpack指南（基础篇）——手把手教你配置webpack
webpack指南（优化篇）——webpack项目优化

---

---

前言

前面我们对webpack的基本使用进行了简单的介绍，今天我们来一起总结下webpack在项目中的使用。

---

一、配置拆分

日常开发时，我们可能有多个环境，比如开发环境，测试环境，生产环境；这些环境使用的webpack配置往往是不一样的，我们需要对不同的环境采用不同的配置文件；

我们拿之前的项目简单进行一个改造：

1.新建webpack.default.config.js/webpack.config.prod.js/webpack.config.dev.js分别表示默认/开发/生产环境下的配置文件；

2.按照使用场景修改配置文件：
2.1 devServer移动至webpack.config.dev.js；
2.2 webpack.config.prod.js的mode修改为production；
3.通过webpack-merge把默认的配置文件与生产开发配置文件关联起来

// 安装webpack-merge
yarn add webpack-merge -D

webpack.config.prod.js修改如下：

// 导入merge
const { merge } = require('webpack-merge');
// 导入默认配置
const defaultConfig = require('./webpack.default.config');
// 合并配置
module.exports = merge(defaultConfig, {
  mode: 'production',
  //   生产环境生成调试代码
  devtool: 'source-map',
});

webpack.config.dev.js修改如下：

const path = require('path');
// 导入merge
const { merge } = require('webpack-merge');
// 导入默认配置
const defaultConfig = require('./webpack.default.config');
// 合并配置
module.exports = merge(defaultConfig, {
  devServer: {
    // 配置目录
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    // 端口号
    port: 9000,
  },
});

二、修改启动命令

我们已经完成了配置文件的拆分，下一步我们需要修改启动命令，让命令与配置文件关联起来；

// 通过-c声明启动文件 运行时使用开发配置 打包时使用生产配置
"scripts": {
    "build": "webpack -c ./webpack.config.prod.js",
    "serve": "webpack serve -c ./webpack.config.dev.js --open"
  },

三、定义环境变量

项目中开发和生产环境往往使用的是不同的请求地址和端口号，我们在配置的时候需要动态的去获取，不能固定写死，这个时候就需要用到环境变量了；

1.webpack环境变量

webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，–env production 或 --env goal=local。

简单来说就是webpack 命令通过–env传入参数，在配置文件中就可以获取到：

// 修改启动命令
"serve": "webpack serve -c ./webpack.config.dev.js --open --env port=7777"

// 修改配置文件
module.exports = (env) => {
  return merge(defaultConfig(env), {
    devServer: {
      // 配置目录
      static: {
        directory: path.join(__dirname, 'dist'),
      },
      // 端口号 通过env.port获取
      port: env.port || 9000,
    },
  });
};

看下效果：

2.系统环境变量
除了这一种方式，我们还可以通过声明系统环境变量的方式来区分：

// 注意这里linux和mac的桥启动命令不一样
"serve": "set PORT=5555 && webpack serve -c ./webpack.config.dev.js"
// 获取端口号
port: process.env.PORT || 9000,

效果是可以实现的，但是实际开发中配置参数有很多，总不能全部写在一行吧，我们需要把配置写在参数表里，启动时候访问参数表；
3.抽离配置参数

我们使用doenv来实现

// 安装
 yarn add dotenv --save

新建两个文件

以开发环境为例，在.env.development中写入配置

ENV = 'development'

#修改端口
port = 4567

修改webpack.config.dev.js

// 引入doenv加载根目录的.env文件去注入环境变量
require('dotenv').config({ path: './.env.development' });
// 端口号改写为这种形式
port: process.env.port || 9000,

ok，大功告成

四、配置路径别名

在vue项目中我们经常使用@作为路径别名，我们今天来了解下是怎么做的

    // 配置路径别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
      // 忽略后缀
      extensions: ['.js', '.jsx'],
    },
  };

---

总结

截至到这里，关于webpack的配置基本已经介绍完了。本系列文章旨在分析webpack各类配置项的配置方法，力求做到开发过程中能自己进行修改，并不需要我们从头去搭建项目。因为实际使用的时候vue-cli已经集成了大部分webpack的功能，已经可以做到开箱即用了；
后续会逐步更新开发自定义loader,plugin和cli,欢迎持续关注~