webpack学习笔记(四)
1 webpack的垫片
举个例子,在main文件中引入jquery和doash两个库:
import $ from 'jquery';
import _ from 'lodash';
import { ui } from './jquery.ui.js';
ui();
对应的jquery.ui.js比如说是一个第三方库,很有可能是在 node_module中:
export function ui(){
$('body').css('background', _.join(['green'],''));
}
由于webpack打包是基于模块的,每个模块之间也是相互独立的,所以在main中引入的jquery 在 jquery.ui.js中无法使用的,故需要在webpack的配置文件中做一下操作:
import webpack from 'webpack'
{
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
_:'lodash'
})
]
}
2 this指代window
因为默认的this是指向当前模块的,所以为了让this指向window,需要安装: npm install imports-loader --save-dev
webpack最初对js只有一个loader的时候:
{
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader'
}
]
}
}
而有多个loader的时候,使用下面方式:
{
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:[{
loader:'babel-loader'
},{
loader:'imports-loader?this=>window'
}
]
}
]
}
}
这样对于js文件,先使用imports-loader把this指向了window 再使用babel-loader 编译js文件,莫要忘记babelrc配置文件。
3 环境变量
已知webpack的配置文件目录如下:
-build
-webpack.common.js
-webpack.dev.js
-webpack.prod.js
分别在dev和prod中使用了webpack-merge对配置文件进行的合并,在这里我们使用命令行中传入环境变量的形式,则dev和prod中只导出自己的配置项,不再引入merge:
此时comm.js中引入merge,如下所示:
const merge = require('webpack-merge');
const devConfig = require('./webpack.dev.js');
const prodConfig = require('./webpack.prod.js'); const commonConfig = {
entry:{},
output:{},
plugin:{},
module:{}
...
} module.exports = (env) => {
if(env && env.production){
return merge( commonConfig ,prodConfig);
}else{
return merge( commonConfig ,devConfig);
}
}
对应的命令行配置中,config.json
{
"scripts":{
"dev":"webpack-dev-server --config ./build/webpack.common.js",
"build":"webpack --env.profuction --config ./build/webpack.common.js",//均运行common文件,并且定义了环境变量
}
}
webpack学习笔记(四)的更多相关文章
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- Go语言学习笔记四: 运算符
Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...
- 零拷贝详解 Java NIO学习笔记四(零拷贝详解)
转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...
随机推荐
- 关于Flex布局
Flex是Flexible Box的缩写,意为“弹性布局”.弹性布局提供了一种更加有效的方式来对一个容器内的项目进行排列/对齐/分配空间等操作,让盒模型具有更大的灵活性.在一个容器盒子上添加displ ...
- 【命令】Ubuntu设置和查看环境变量
转自[Ubuntu]Ubuntu设置和查看环境变量 查看环境变量 env env命令是environment的缩写,用于列出所有的环境变量 export 单独使用export命令也可以像env列出所有 ...
- 零基础学习JavaSE(一)
一.开发环境安装配置 1.1 安装jdk jdk下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载后安 ...
- Problem 7: 10001st prime
By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13. ...
- webservice接口,用Soapui
webservice接口怎么测试呢,他不需要你在拼报文了,会给一个webservice的地址,或者wsdl文件,直接在soapui导入,就可以看到这个webservice里面的所有接口,也有报文,直接 ...
- Fiddle手机抓包
Fiddler是一个http调试代理,它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddle 所有的“进出”的数据(指co ...
- IP通信基础课堂笔记----关于数链层
课前回顾 IOS从上到下分别有:应用层,传输层,网络层,数链层,物理层. IP是网络层的地址,MAC是数链层的地址,IP必须通过ARP才能转换成MAC地址. 课堂内容 1.如何在数链层实现发送端数据无 ...
- Vim+Taglist+AutoComplPop之代码目录分栏信息和自动补全提示(Ubuntu环境)
一步: 首先在Ubuntu环境中安装ctags: sudo apt-get install ctags 第二部: 安装Taglist-------------Taglist是vim的一个 ...
- 解决Exception in thread "main" java.nio.BufferOverflowException报错
学习bytebuffer时,写了简单的demo报错: 错误的提示:Exception in thread "main" java.nio.BufferOverflowExcepti ...
- 玩转BLE(1)_Eddystone beacon
1. 前言 你相信两条命令就可以把自己的破手机变成一个Beacon节点吗?不相信的话就接着往下看吧. 通过前几篇“蓝牙协议分析”相关的文章,特别是“蓝牙协议分析(3)_蓝牙低功耗(BLE)协议栈介绍” ...