获取全套webpack 4.x教程，请访问瓦力博客
小菜之前在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"}
到此本小节就结束了，小伙伴们继续加油
