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,欢迎持续关注~

你可能感兴趣的:(前端学习笔记,webpack,javascript,前端)