为了账号安全,请及时绑定邮箱和手机立即绑定

webpack 环境变量(18)

标签:
webpack

小菜之前在webpack配置中区分开发环境和生产环境,但是在源代码中还不能区分当前是开发环境还是生产环境。我们可能会遇到这种情况,如在开发的时候请求地址http://www.waliblog.com/login但是项目上线后,请求地址就变成http://www.baidu.com/login。我们需要完成这种操作,需要用到DefinePlugin 文档{:target="_blank"}插件

1.安装

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处,设置它,就可以忘记开发环境和生产环境构建的规则。之前安装过webpack就不需要安装了

yarn add webpack

2.配置

build/plugins.js

const dirpath = require('./base/path');
const config = require('./base/config');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');    //生成html文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');  //清除
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  //css样式提取


let plugins = [
	new HtmlWebpackPlugin({
		title: '瓦力博客',
		template: dirpath.src + '/index.html'   //以src/index.html为编译模板
	}),
	new  MiniCssExtractPlugin({
		filename: config.NODE_ENV == 'development'?'[name.css]': `${dirpath.css}/[name].[hash].css`,
		chunkFilename: config.NODE_ENV == 'development'?'[id].css': `${dirpath.css}/[id].[hash].css`
	}),   //css提取
	new webpack.ProvidePlugin({
		_:'loadsh',
		url: ['../src/api/apipath', 'url']
	}),
+	new webpack.DefinePlugin({ 
+		IS_PRODUCTION: config.NODE_ENV == 'development'?JSON.stringify(false):JSON.stringify(true),
+	}),
	new CleanWebpackPlugin()
]

if('development' == config.NODE_ENV){
	plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = plugins;

api/apipath.js

let host

if(IS_PRODUCTION){
    host = 'http://www.baidu.com'
}else {
    host = 'http://www.walibo.com'
}

export const url = {
    login: `${host}/login`,         //登录
    signout: `${host}/signout`      //退出登录
}

index.js

console.log(url)

开发webpack

yarn run dev

打开控制台,会看到控制台输出:

Object
login: "http://www.walibo.com/login"
signout: "http://www.walibo.com/signout"

生产webpack

yarn run prod

打开控制台,会看到控制台输出:

{login: "http://www.baidu.com/login", signout: "http://www.baidu.com/signout"}

到此本小节就结束了,小伙伴们继续加油

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消