shimming简单翻译是垫片。我们之前写代码会遇到向下面情况一样，在一个文件中引入很多第三方库
import $ from 'jquery'
import _ from 'loadsh'
import {http} from 'util/http'
import {api} from 'config/api'
.....
反正是引入很多第三方库或者是自己写的库，每个js文件用到的库都要引入，让人很繁琐，但又不能不引入。在webpack中ProvidePlugin插件能帮助我们解决上面遇到的问题。
1.安装
这个插件是webpack官方自带的ProvidePlugin 文档 所以要安装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
在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
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
只要在plugins.js插件中配置，那么在所有源码中都不需要单独引入了。ProvidePlugin不仅可以配置第三方库，还可以配置自己的库文件。配置自己的库文件一定要将路径写对，不然会报错的。小菜这节就做到这里，小伙伴们尽情的发挥想象吧！