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

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"}

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

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)