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

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

.....

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

1.安装

这个插件是webpack官方自带的ProvidePlugin 文档 所以要安装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

ssl

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

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

3.引申

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

文件结构

myProject
 |-dist
 |-node_modules
 |-src
+    |-api
+        |-apiPath.js
    |-util
        |-math.js
        |-loadsh.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

ssl

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

webpack4.x 教程

webpack 准备工作(1) webpack 手写最基本的配置(2) webpack 打包样式(3) webpack 让打包更便捷(4) webpack 打包图片(5) webpack iconfont打包(6) webpack devServer本地开发(7) webpack 处理ES6语法(8) webpack SourceMap配置(9) webpack Tree Shaking(10) webpack js代码分割(11) webpack 懒加载(12) webpack 打包分析,Preloading,Prefetching(13) webpack 模块化区分开发和生产(14) webpack 样式文件的代码分割(15) webpack 浏览器缓存(16) webpack shimming(17) webpack 环境变量(18) webpack Esline(19)