Loader
Webpack默认情况下只能给js进行打包;
后面加入了给其他文件打包的功能,就有了Loader; Loader就是在webpack里面帮助开发者处理不同模块的;
比如想要给jpg这种图片打包，就要使用file-loader;
## 安装webpack
$yarn add webpack webpack-cli --dev
#安装插件
yarn add file-loader
#或者
npm install file-loader
而后:
npx webpack
插件(plugins)
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
安装插件:
yarn add html-webpack-plugin
此时webpack.config.js:
const path = require('path');
//此插件作用:自动生成dist/index.html,
// 并且引入生成的js文件即:`dist下面的js文件`
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js',
sub: './src/index.js'
},
output: {
publicPath: 'http://cdn.xxx.com/',//添加这一行之后,dist下生成的index.html里面的src就会补全url
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({ //这里的作用是帮你在`dist/index.html`里面添加`/src/index.html`里面的一行
template: './src/index.html'
})
]
}
此时的dist下的index.html就会发生变化:
<script defer="defer" src="sub.js"></script>
会变为:
<script defer="defer" src="http://cdn.xxx.com/sub.js"></script>
有了模板template之后: dist下的index.html就会增加一行:
<div id="app"></div>
往往在重新打包的时候需要手动删除dist文件,往往使用clear-webpack-plugin这个插件来实现自动删除; 安装插件:
yarn add clean-webpack-plugin
#或者
npm install clear-webpack-plugin -D
同时webpack.config.js中:
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin()
]
file-loader
module: {
rules: [
{
test: /.(jpg|png|gif)$/,//表示能够处理后缀为jpg,png,gif结尾的图片
use: {
loader: 'file-loader',
options: {
// 占位符 placeholder,表示生成的图片的路径
//为dist/images/
//名字为 `src/`中jpg的图片的名字这里为avatar
//avatar_hash值.后缀
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}
]
}
配置文件见: https://github.com/richard1230/CodeLearning/blob/main/Javascript/Webpack/Loader/webpack.config.js
原文始发于微信公众号（迪哥讲事）：Webpack系列-Loader与插件
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论