獲取全套webpack 4.x教程蚕涤，請?jiān)L問瓦力博客
shimming簡單翻譯是墊片峻黍。我們之前寫代碼會遇到向下面情況一樣烂瘫，在一個(gè)文件中引入很多第三方庫
import $ from 'jquery'
import _ from 'loadsh'
import {http} from 'util/http'
import {api} from 'config/api'
.....
反正是引入很多第三方庫或者是自己寫的庫扎即，每個(gè)js文件用到的庫都要引入醒第，讓人很繁瑣花沉，但又不能不引入柳爽。在webpack中ProvidePlugin插件能幫助我們解決上面遇到的問題。
1.安裝
這個(gè)插件是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;
}
運(yùn)行webpack
yarn run dev
在index.js和math.js文件中我們沒有引入loadsh庫磷脯，但是代碼還能夠正常運(yùn)行，是因?yàn)槲覀冊?code>plugins.js中配置了loadsh庫娩脾。
ProvidePlugin插件作用是自動(dòng)加載模塊赵誓，而不必到處 import 或 require。只要在ProvidePlugin插件中配置了變量柿赊。凡是在源碼中用到_變量俩功，在webpack打包時(shí)，就會文件最前面引入import _ from 'loadsh'就不要我們自己手動(dòng)引入了碰声。
3.引申
其實(shí)ProvidePlugin不僅可以適用第三方庫诡蜓，還可以自定義自己常用的庫。
文件結(jié)構(gòu)
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;
運(yùn)行webpack
yarn run dev
只要在plugins.js插件中配置胰挑，那么在所有源碼中都不需要單獨(dú)引入了蔓罚。ProvidePlugin不僅可以配置第三方庫椿肩，還可以配置自己的庫文件。配置自己的庫文件一定要將路徑寫對豺谈，不然會報(bào)錯(cuò)的郑象。小菜這節(jié)就做到這里，小伙伴們盡情的發(fā)揮想象吧茬末！
