獲取全套webpack 4.x教程，請(qǐng)?jiān)L問(wèn)瓦力博客

小菜之前在webpack配置中區(qū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，但是在源代碼中還不能區(qū)分當(dāng)前是開(kāi)發(fā)環(huán)境還是生產(chǎn)環(huán)境。我們可能會(huì)遇到這種情況，如在開(kāi)發(fā)的時(shí)候請(qǐng)求地址http://www.waliblog.com/login但是項(xiàng)目上線(xiàn)后，請(qǐng)求地址就變成http://www.baidu.com/login。我們需要完成這種操作，需要用到DefinePlugin 文檔{:target="_blank"}插件

1.安裝

DefinePlugin 允許創(chuàng)建一個(gè)在編譯時(shí)可以配置的全局常量。這可能會(huì)對(duì)開(kāi)發(fā)模式和生產(chǎn)模式的構(gòu)建允許不同的行為非常有用。如果在開(kāi)發(fā)構(gòu)建中，而不在發(fā)布構(gòu)建中執(zhí)行日志記錄，則可以使用全局常量來(lái)決定是否記錄日志。這就是 DefinePlugin 的用處，設(shè)置它，就可以忘記開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境構(gòu)建的規(guī)則。之前安裝過(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)

開(kāi)發(fā)webpack

yarn run dev

打開(kāi)控制臺(tái)，會(huì)看到控制臺(tái)輸出：

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

生產(chǎn)webpack

yarn run prod

打開(kāi)控制臺(tái)，會(huì)看到控制臺(tái)輸出：

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

到此本小節(jié)就結(jié)束了，小伙伴們繼續(xù)加油