webpack shimming(17)

shimming简单翻译是垫片。我们之前写代码会遇到向下面情况一样，在一个文件中引入很多第三方库

import $ from 'jquery'
import _ from 'loadsh'
import {http} from 'util/http'
import {api} from 'config/api'

.....

反正是引入很多第三方库或者是自己写的库，每个js文件用到的库都要引入，让人很繁琐，但又不能不引入。在webpack中ProvidePlugin插件能帮助我们解决上面遇到的问题。

1.安装

这个插件是webpack官方自带的ProvidePlugin 文档{:target="_blank"} 所以要安装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'
+	}),
	new CleanWebpackPlugin()
]

if('development' == config.NODE_ENV){
	plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = plugins;

index.js

import { strJoin } from './util/math';

let arr = strJoin(['欢迎','来到','瓦力','博客'])
console.log(arr)

uild/math.js

export const strJoin = arr=>{
    let str = _.join(arr,'++');
    return str;
}

运行webpack

yarn run dev

在index.js和math.js文件中我们没有引入loadsh库，但是代码还能够正常运行，是因为我们在plugins.js中配置了loadsh库。

ProvidePlugin插件作用是自动加载模块，而不必到处 import 或 require。只要在ProvidePlugin插件中配置了变量。凡是在源码中用到_变量，在webpack打包时，就会文件最前面引入import _ from 'loadsh'就不要我们自己手动引入了。

3.引申

其实ProvidePlugin不仅可以适用第三方库，还可以自定义自己常用的库。

文件结构

myProject
|-build
   |-base
       |-path.js
       |-config.js
   |-mode.js
   |-entry.js
   |-devtool.js
   |-module.js
   |-plugins.js
   |-devServer.js
   |-optimization.js
   |-output.js
 |-dist
 |-node_modules
 |-src
+    |-api
+        |-apiPath.js
     |-util
        |-math.js
     |-assets
        |-css
            |-index.css
        |-less
            |-index.less     
        |-sass
            |-index.scss
        |-images
            |-wali_logo.png
     |-index.html
     |-index.js
 |-package.json
 |-webpack.config.js
 |-postcss.config.js
 |-.babelrc

api/apiPath.js

在apiPath.js中定义所有接口

const host = 'http://www.walibo.com'

export const url = {
    login: `${host}/login`,         //登录
    signout: `${host}/signout`      //退出登录
}

index.js

console.log(url)

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 CleanWebpackPlugin()
]

if('development' == config.NODE_ENV){
	plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = plugins;

运行webpack

yarn run dev

只要在plugins.js插件中配置，那么在所有源码中都不需要单独引入了。ProvidePlugin不仅可以配置第三方库，还可以配置自己的库文件。配置自己的库文件一定要将路径写对，不然会报错的。小菜这节就做到这里，小伙伴们尽情的发挥想象吧！