目录
- 1. 全局变量引入问题
引入jquery
后,如何配置使用$
和window.$
- 2. 图片处理问题
如何打包html,js,css
里的图片引用 - 3. 打包文件分类
不同的文件打包到对应的文件夹下 - 4. 打包多页应用
打包多个html页面 - 5. 配置source-map
使用源码映射,更好的调试代码 - 6. watch的用法
实时更新打包 - 7. webpack小插件应用
打包前清空文件目录,拷贝文件到打包目录,版权申明注释
1. 全局变量引入问题
有一些第三方模块需要依赖window
上的jquery
安装jquery:
npm i jquery
使用jquery:
import $ from 'jquery';
console.log($)
console.log(window.$) // undefined
由上图可以看出,$
没有暴露给window
解决方法:
安装:
npm i expose-loader -D
使用:
方式一:内联loader
的方法:
import $ from 'expose-loader?$!jquery';
方式二:webpack.config.js
->module
->rules
里配置:
{
test:require.resolve('jquery'),
use:'expose-loader?$'
},
前面的方法都需要在使用jquery
的地方import
导入
那么,如何直接使用$
,无需import
呢?
解决方法:
在每个模块中注入$
对象
webpack.config.js
中声明:
let webpack = require('webpack')
webpack.config.js
->plugins
中配置插件:
new webpack.ProvidePlugin({ // 在每个模块中注入$对象
$:'jquery'
})
这样子就可以无需import
,直接使用$
, 但是window.$
又变为undefined
还有一种情况,我们无需用第三方模块引入jquery
,直接在页面中通过script
标签引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
这种方式就可以直接拿到window.$
引入第三方模块方式总结:
expose-loader
暴露到window
上providePlugin
每个模块中注入$
对象- 引入不打包方式
<script>
2. 图片处理问题
如何在webpack中使用图片,并且打包图片
图片的引入方式有:
- 在JS中创建图片来引入
- 在CSS中使用
background:url()
<img src="" alt="" />
安装file-loader
:
默认会在内部生成一张图片,到build目录下;
把生成的图片的名字返回回来
npm i file-loader -D
webpack.config.js
->module
->rules
里配置:
{
test:/\.(png|jpg|gif)$/,
use:'file-loader'
},
使用:
JS中引入图片:
import logo from './favicon.png'
let image = new Image();
console.log(logo)
image.src = logo;
document.body.appendChild(image)
CSS中引入图片:
body{
background: pink;
/* css-loader会将地址转换为require(url) */
background: url("./favicon.png")
}
html中引入图片:
安装:
npm i html-withimg-loader -D
webpack.config.js
->module
->rules
中配置:
{
test:/\.html$/,
use:'html-withimg-loader' // 解析html中的图片资源
},
需要将原先file-loader
模块配置修改如下:
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'file-loader',
options:{
esModule:false
}
}]
},
html页面中就可以直接使用:
<img src="./favicon.png" alt=""/>
另外,有时候我们需要的图片比较小,这个时候,我们不希望请求图片,就可以使用base64
安装:
npm i url-loader -D
webpack.config.js
->module
->rules
中配置:
{
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:200*1024 // 做一个限制,当图片<200k的时候,用base64来转化,否则用file-loader
}
}
},
注意:base64不会发送请求,但会比原图片大1/3
3. 打包文件分类
如果我们想把打包的文件如:img,css, js等输出到相应的目录下,该怎么做?
图片打包输出路径配置:
{
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:1,// 做一个限制,当图片<200k的时候,用base64来转化,否则用file-loader
esModule:false,
outputPath:'img/' // 图片打包输出路径,img文件下
}
}
},
CSS打包输出路径设置:
webpack.config.js
->plugins
new MiniCssExtractPlugin({
filename:'css/main.css' // 抽离出的文件名, 打包输出到css文件下
}),
如果我们的CSS,图片等路径是在域名网址下的,如何配置?
webpack.config.js
->output
添加属性:
示例:
publicPath:'http://www.baidu.com/'
打包后的html:
由上图可以看出,js,img,css等路径都加上了设置好的www.baidu.com
如果,我们只需要给图片设置域名路径,其他不需要,该怎么做?
很简单,可以直接在图片的配置里加上publicPath:'http://www.baidu.com/'
属性设置:
例如:
{
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:1,// 做一个限制,当图片<200k的时候,用base64来转化,否则用file-loader
esModule:false,
outputPath:'img/', // 图片打包输出路径
publicPath:'http://www.baidu.com/'
}
}
},
4. 打包多页应用
目录结构如下:
将index.js
和other.js
分别打包引入到index.html
和other.html
中:
webpack.config.js
配置如下:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode:'development',
// 多入口
entry: {
home: './src/index.js',
other:'./src/other.js'
},
output:{
// [name] 这里表示home或other
filename:'[name].js',
path: path.resolve(__dirname,'dist')
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html',
filename:'home.html',
chunks:['home'] // 打包生成的home.html引入home.js
}),
new HtmlWebpackPlugin({
template:'./index.html',
filename:'other.html',
chunks:['other'] // 打包生成的other.html引入other.js
}),
]
}
如果想在打包生成的index.html
引入多个js文件,只需在chunks
属性值数组里添加即可,如:
chunks:['other','home'] // 打包生成的html中引入other.js和home.js
5. 配置source-map
我们前面打包生成的代码,如果运行后出现错误,点击控制台的错误,跳转到打包后的源码错误地方,这个源码是压缩的,因此很难调试。
配置source-map
源码映射,即可以轻松调试源码。
webpack.config.js
配置里添加:
方式一:
会单独生成一个sourcemap文件,用于调试代码;出错了,会标识错误的列和行
devtool:'source-map', // 源码映射,会单独生成一个sourcemap文件,用于调试代码;出错了,会标识错误的列和行
方式二:
不产生单独的文件,但可以显示错误列
devtool:'eval-source-map',
方式三:
产生一个单独的文件,不显示错误列
devtool:'cheap-module-source-map', // 产生后可以保留起来,用于调试
方式四:
不产生单独文件,不显示错误列,集成在打包文件中
devtool:'cheap-module-eval-source-map',
6. watch的用法
前面,我们每次改完代码,都需要手动npm run build
重新打包。
那么如何实现自动监控实时打包呢?
webpack.config.js
配置里添加:
watch:true, // 打开监控
watchOptions:{ // 监控的选项
poll:1000, // 每秒监控1000次
aggregateTimeout:500, // 防抖 我一直输入代码,等我停了后500ms后打包
ignored:/node_modules/ // 不需要监控的文件
},
7. webpack小插件应用
介绍三个插件:
- cleanWebpackPlugin
- copyWebpackPlugin
- bannerPlugin
前两个是第三方模块的,第三个是内置的;
cleanWebpackPlugin
插件
有时候,我们不断打包生成的文件会不断的堆积,例如:
我们用hash
值生成文件名,第一次打包生成index23847583.html
文件放在在dist
文件夹下,第二次打包生成的index49582038.html
文件放在dist
文件夹下,第三次。。。
使用这个插件可以在我们打包输出目录之前,将原先的dist
文件夹清空
安装:
npm i clean-webpack-plugin -D
配置:
webpack.config.js
里配置:
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
webpack.config.js
->plugins
里添加:
new CleanWebpackPlugin()
copyWebpackPlugin
插件
如果你想将一些文件拷贝到dist
文件中,可以使用该插件;
安装:
npm i copy-webpack-plugin -D
配置:
webpack.config.js
里配置:
const CopyWebpackPlugin = require('copy-webpack-plugin');;
webpack.config.js
->plugins
里添加:
new CopyWebpackPlugin([
{from:'./doc',to:'./'}
])
如图所示,上述配置,将doc
里的文件拷贝到了dist
文件中;
bannerPlugin
插件
版权申明插件,它是webpack内部的插件
因此,先在webpack.config.js
中声明:
const webpack = require('webpack');
webpack.config.js
->plugins
里添加:
new webpack.BannerPlugin('该代码为小仙女所写!')
效果如下: