巴彦淖尔网站制作,网页设计与制作的原则,建造师报考条件,南京产品设计公司系列文章目录
webpack指南#xff08;基础篇#xff09;——手把手教你配置webpack webpack指南#xff08;优化篇#xff09;——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 -Dwebpack.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 goallocal。 简单来说就是webpack 命令通过–env传入参数在配置文件中就可以获取到
// 修改启动命令
serve: webpack serve -c ./webpack.config.dev.js --open --env port7777// 修改配置文件
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 PORT5555 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,欢迎持续关注~
