必懂的webpack高级配置
webpack高级配置
1.HTML中img标签的图片资源处理
使用时、只需要在html中正常引用图片即可、webpack就会找到对应的资源进行打包、并修改html中的引用路径
主要是将html中的img路径文件进行打包、和copy-webpack-plugin是有区别的、copy-webpack-plugin主要是拷贝一些资源文件
项目中的图片资源都使用html-withimg-loader
项目中的音频、视频等资源文件使用copy-webpack-plugin
安装
npm i -S html-withimg-loader
配置 loader
{
test:/\.(htm|html)$/,
loader: 'html-withimg-loader'
}
2.多页应用打包
虽然SPA大行其道、但是多页应用还是非常重要的
修改配置文件
entry:{
index: './src/index.js',
other: './src/other.js'
},
output: {
path: path.join(__dirname, 'dist'),
// filename:'bundle.js',
filename:'[name].js',
publicPath: '/'
},
plugins:[
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: './src/index.html'
// }),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
chunks:['index']
}),
new HtmlWebpackPlugin({
filename: 'other.html',
template: './src/other.html',
chunks:['other']
})
],
3.第三方库的两种引入方式
可以通过 expose-loader 进行全局变量的注入、同时也可以使用内置插件 webpack.ProvidePlugin 对每个模块的闭包空间注入一个变量,自动加载模块,而不必到处import或require
expose-loader
将库引入到全局作用域
安装
npm i -D expose-loader
配置loader
module:{
rules:[
{
test: require.resolve('jquery'),
use:{
loader: 'expose-loader',
options: '$'
}
}
]
}
require.resolve 用来获取模块的绝对路径、所以这里的loader只会作用于jq模块并且只有在bundle中使用它时才会进行处理
webpack.ProvidePlugin
将库自动加载到每个模块
引入webpack
const webpack = require('webpack')
配置
plugins:[
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
4.区分环境配置文件打包
项目开发时一般需要使用两套配置文件、用于开发阶段打包(不压缩代码、不优化代码增加效率)和上线阶段打包(压缩代码、优化代码,打包后直接上线使用)
需要安装 webpack-merge
npm i -D webpack-merge
抽取三个配置文件
- webpack.base.js
- webpack.prod.js
- webpack.dev.js
实现步骤
- 将开发环境和生产环境公用的配置放入base中,不同的配置内容放置到各自的prod或者dev文件中,如mode
- 在dev和prod中使用 webpack-merge 把自己的配置和base的配置进行合并后导出
- 将package.json中的脚本参数进行修改,通过 —config 手动指定特定的配置文件
webpack配置的路径问题
Webpack 配置时,相对路径都是相对于根目录的,绝对路径就是配置文件所处的文件目录,因此在将配置文件放置的不是在根目录的时候,需要注意绝对路径是否以根目录为参照的
5.定义环境变量
除了区分不同的配置文件进行打包、还需要在开发时知道当前的环境时开发阶段还是上线阶段、所以可以借助内置插件
DefinePlugin
来定义环境变量、最终可以实现开发阶段和上线阶段的区分
引入webpack
const webpack = require('webpack')
创建插件对象并定义环境变量
需要注意 DefinePlugin 设置的值是一个表达式,
IS_DEV: 'true'是设置IS_DEV为boolean类型的true
number: '1 + 1'是设置number为2,因为是一个表达式,所以'1 + 1'会进行运算将得到的值赋值给健string: '"设置字符串的值"',设置字符串的值需要多嵌套一层引号
variables: 'textVar'代表的是将textVar变量的值设置给variables,而不是将textVar作为字符串赋值给variables
plugins:[
new webpack.DefinePlugin({
IS_DEV: 'true',
number: '1 + 1',
string: '"设置字符串的值"',
variables: 'textVar'
})
]
在src打包的代码环境下可以直接使用
console.log('我是index js', IS_DEV, number, string)
必懂的webpack高级配置的更多相关文章
- 【Webpack】373- 一看就懂之 webpack 高级配置与优化
本文原载于 SegmentFault 社区专栏 前海拾贝 作者:JS_Even_JS 一.打包多页面应用 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpac ...
- 必懂的wenpack优化
webpack优化 1.production 模式打包自带优化 tree shaking tree shaking是一个术语.通常用于打包时移除js中未引用的代码(dead-code),它依赖于ES6 ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- [转帖]K8s 工程师必懂的 10 种 Ingress 控制器
K8s 工程师必懂的 10 种 Ingress 控制器 https://www.kubernetes.org.cn/5948.html 控制器有好多啊. 2019-10-18 23:07 中文社区 分 ...
- webpack常用配置总结
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- vim的一些高级配置
今天有幸看到一篇博文,有一些vim的高级配置 在linux或者unix下面的.vimrc文件中,在其中可以添加如下片段,可以实现解释上面你说的那些高级用法 " Ctrl + K 插入模式下光 ...
- webpack快速入门——实战技巧:webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...
- webpack基础配置
webpack运行规则: Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块.在页面启动时,会先执行入口文件中的代码,其它模块会在运行 require 的时候再执行. 运行时主 ...
- webpack环境配置2
1.webpack安装 Step 1: 首先安装Node.js, 在1中已经详细介绍了. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm ins ...
随机推荐
- javaweb各种框架组合案例(一):maven+spring+springMVC+jdbcTemplate
为了体现spring jdbc对于单表操作的优势,我专门对dao层做了一个抽离,使得抽离出的核心dao具有通用性.主要技术难点是对于泛型的反射.注意:单表操作中,数据库表的字段要和实体类的属性名保持高 ...
- 血的教训--如何正确使用线程池submit和execute方法
血的教训之背景:使用线程池对存量数据进行迁移,但是总有一批数据迁移失败,无异常日志打印 凶案起因 听说parallelStream并行流是个好东西,由于日常开发stream串行流的场景比较多,这次 ...
- 留存: struts2+jquery+json集成
原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...
- 如何使用jQuery可以让滚轮滚到底部可以自动加载所需内容
话不多说先上代码 $(window).scroll(function() { var scrollTop = $(this).scrollTop(); //滚动高度 var windowHeig ...
- C语言实现Linux网络嗅探器
C语言实现Linux网络嗅探器 0x01 实验简介 网络嗅探器是拦截通过网络接口流入和流出的数据的程序.所以,如果你正在浏览的互联网,嗅探器以数据包的形式抓到它并且显示.在本实验中,我们用 C 语言实 ...
- Fabric1.4源码解析:Peer节点加入通道
又开始新的阅读了,这次看的是Peer节点加入通道的过程.其实每次看源码都会有好多没有看懂的地方,不过相信只要坚持下去,保持记录,还是有很多收获的. 对于Peer节点加入通道这一 ...
- 17 | 精益求精:聊聊提高GUI测试稳定性的关键技术
- 09、MySQL—列属性
列属性又称之为字段属性,在mysql中一共有6个属性:null,默认值,列描述,主键,唯一键和自动增长 1.Null属性 NULL属性:代表字段为空 如果对应的值为YES表示该字段可以为NULL 注意 ...
- linux查看文件内容命令tail、cat、tac、head、echo
1.tail tail -f test.log 你会看到屏幕不断有内容被打印出来. 这时候中断第一个进程Ctrl-C, linux 如何显示一个文件的某几行(中间几行) 从第3000行开始,显示100 ...
- 深入理解Java虚拟机笔记——垃圾收集器与内存分配策略
目录 判断对象是否死亡 引用计数器算法 可达性分析算法 各种引用 回收方法区 垃圾收集算法 标记-清除算法 复制算法 标记-整理算法 分代收集算法 HotSpot算法实现 枚举根节点 GC停顿(Sto ...