08 webpack4.0學習筆記——配置文件_DefinePlugin使用

概述

        DefinePlugin用來作定義。這就相似於咱們項目開發中的config文件同樣，在config文件中通常放的是系統代碼中的一些服務器地址之類的公共信息，咱們將這些信息提取出來單獨放在配置文件中，方便於後期的維護和管理。

        那DefinePlugin的功能和config這個文件相似，咱們能夠在它裏面定義一些公有信息，而後在代碼裏直接使用，接下來咱們來看詳細操做步驟。

 

具體操做步驟

        一、根據官網的介紹咱們來配置此插件，以下：

        二、而後在咱們的input.js文件中來使用這個變量SERVER_URL,以下：

        上述代碼可看到，咱們在代碼裏並無事先引入其餘信息，直接使用SERVER_URL這個變量的。

        三、到這一步，若是咱們進行打包處理的話會出現報錯信息，由於咱們的defineplugin插件是webpack所屬之下的，因此咱們要在配置文件的頂部還要引入webpack，以下：

        四、這樣一來，咱們再次執行打包處理後，就會生成結果文件，打開結果文件搜索fetch關鍵字可看到，在此處它請求的再也不是咱們定義的變量，而是一個具體的url地址，以下：

        五、本文的配置文件代碼和input.js入口文件代碼，完整版以下：

        配置文件：

const path=require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack=require('webpack');

module.exports={
	entry:'./input.js',
	output:{
		path:path.resolve(__dirname,'dist'),
		filename:'output.bundle.js'
	},
	mode:'development',
	plugins: [
		new MiniCssExtractPlugin({
		  // Options similar to the same options in webpackOptions.output
		  // both options are optional
		  filename: '[name].css',
		  chunkFilename: '[id].css',
		}),
		new webpack.DefinePlugin({
		  'SERVICE_URL': JSON.stringify('https://dev.example.com')
		}),
	],
	module:{
		rules:[
			{
				test:/\.(png|jpg|gif)$/i,
				use:[
					{
						loader:'url-loader',
						options:{
							limit:919200
						}
					}
				]
			},
			{
			  test: /\.(js|jsx)$/,
			  exclude: /(node_modules|bower_components)/,
			  use: {
				loader: 'babel-loader',
				options: {
				  presets: ['@babel/preset-env'],
				  plugins: ['@babel/plugin-transform-react-jsx']
				}
			  }
			},
			{
			  test: /\.scss$/,
			  use: [
				  // fallback to style-loader in development
                MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
			  ]
			}
		]
	}
};

        入口文件：

const good='hello';

import HelloReact from './HelloReact.jsx';

import './test.scss';

import img1 from './img/01.png';
import img2 from './img/02.jpg';

//ES6中的語法 異步處理
async function sayHello(){
	const result=await fetch(SERVICE_URL);   
	console.log(result);
}
sayHello();

 

總結

        本文介紹了defineplugin插件的使用，此插件在咱們實際項目開發中運用的比較多，因此你們要花精力再研究研究哦。