<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id='root'></div> </body> </html>
index.js
import _ from 'lodash'; import $ from 'jquery'; import { ui } from './jquery.ui'; ui(); const dom = $('<div>'); dom.html(_.join(['1','1'],'---')); $('body').append(dom);
jquery.ui.js
export function ui(){ $('body').css('background', '#abcdef'); }
这个时候发现ui(),没有正确的运行。报错了jquery.ui.js里面找不到$。在index.js引入了$。但是为什么jquery.ui.js里面找不到$呢?原因很简单,在webpack中,是基于模块打包的。模块里面这些变量只能在这个模块的文件里面被使用。而换了一个文件,再想使用上面文件的比那里,那是不可能的。通过这种形式,模块与模块之间不会有任何的耦合。这样出了问题,直接在自己的模块找问题就行了。不会因为一个模块而影响到另外一个模块。所以变量是隔离的。那么想要使用这个$,就必须在jquery.ui.js的顶部去引入jquery。
const webpack = require('webpack'); module.exports = { plugins: [ // webpack自带的插件 new webpack.ProvidePlugin({ // 意思是如果我的一个模块中使用了$这样一个字符串,我就会在模块中自动的引入jquery这个 $: 'jquery' }) ], }
配置好了之后,重启服务。npm run dev。那么在没有引入jquery的情况下也能用,因为底层自动引入了。这个时候我们就不需要在文件中引入_,$等
const webpack = require('webpack'); module.exports = { plugins: [ // webpack自带的插件 new webpack.ProvidePlugin({ // 意思是如果我的一个模块中使用了$这样一个字符串,我就会在模块中自动的引入jquery这个 $: 'jquery', _: 'lodash' }) ], }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id='root'></div> </body> </html>
index.js
import { ui } from './jquery.ui'; ui();
const dom = $('<div>'); dom.html(_.join(['1','1'],'---')); $('body').append(dom);
jquery.ui.js
export function ui(){ $('body').css('background', _.join(['#abcdef'],'')); }
重启服务,,没问题。
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id='root'></div> </body> </html>
index.js
console.log(this === window);
打印出来的是false,也就是src里面的this不指向window。那我就是想让他指向window,怎么做呢?先装一个插件
npm install imports-loader -D
module.exports = { module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: [{ loader: 'babel-loader' }, { loader: 'imports-loader?this=>window' }], } } }
在加载js的时候多加载一个loader,叫imports-loader,将this指向window。这个时候打印出来的就是true了。说明模块里面的this就指向window了。实际上也是修改webpack一些默认的行为。或者说实现webpack原始打包无法实现的一些效果。这种行为都叫做shimming。垫片的行为。