獲取全套webpack 4.x教程壶冒，請?jiān)L問瓦力博客
小菜之前在webpack配置中區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境规肴，但是在源代碼中還不能區(qū)分當(dāng)前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。我們可能會(huì)遇到這種情況丘薛，如在開發(fā)的時(shí)候請求地址http://www.waliblog.com/login但是項(xiàng)目上線后沉删，請求地址就變成http://www.baidu.com/login。我們需要完成這種操作余指，需要用到DefinePlugin 文檔{:target="_blank"}插件
1.安裝
DefinePlugin 允許創(chuàng)建一個(gè)在編譯時(shí)可以配置的全局常量捕犬。這可能會(huì)對開發(fā)模式和生產(chǎn)模式的構(gòu)建允許不同的行為非常有用。如果在開發(fā)構(gòu)建中酵镜，而不在發(fā)布構(gòu)建中執(zhí)行日志記錄碉碉，則可以使用全局常量來決定是否記錄日志。這就是 DefinePlugin 的用處淮韭，設(shè)置它垢粮，就可以忘記開發(fā)環(huán)境和生產(chǎn)環(huán)境構(gòu)建的規(guī)則。之前安裝過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)
開發(fā)webpack
yarn run dev
打開控制臺(tái)靠粪，會(huì)看到控制臺(tái)輸出：
Object
login: "http://www.walibo.com/login"
signout: "http://www.walibo.com/signout"
生產(chǎn)webpack
yarn run prod
打開控制臺(tái)蜡吧，會(huì)看到控制臺(tái)輸出：
{login: "http://www.baidu.com/login", signout: "http://www.baidu.com/signout"}
到此本小節(jié)就結(jié)束了，小伙伴們繼續(xù)加油
