1、使用 url-loader 或者 file-loader 来处理本地的资源文件。
npm install url-loader file-loader -D
对webpack.config.js文件进行修改
module.exports = {
module: {
rules: [
//...
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: [
{
loader: "url-loader",
options: {
//资源大小小于10K,将资源转换为base64，超过10K，将图片拷贝到dist目录。将资源转换为 base64 可以减少网络请求次数，但是 base64 数据较大，如果太多的资源是 base64，会导致加载变慢，因此设置 limit 值时，需要二者兼顾。
limit: 10240,
//esModule设置为false，否则<img src={require('XXX.jpg')} />会出现 <img src=[Module Object] />
esModule: false,
//为了保留图片的原始扩展名
name: '[name]_[hash:6].[ext]',
//如果图片文件很多的话，设置文件存放路径，就会出现一个assets文件专门存放图片
outputPath: 'assets'
}
}
],
exclude: /node_modules/
}
]
}
};
下面进行图片打包的测试，在index.js文件下引入图片
import './assets/QQ图片20191230082601.jpg'
import './assets/QQ图片20191230082605.jpg'
然后运行npm run build，但是出现了以下的warning：
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
QQ图片20191230082601_ec9d2f.jpg (657 KiB)
QQ图片20191230082605_007acc.jpg (981 KiB)
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
该问题可以通过在webpack.config.js文件中添加配置进行修改
module.exports = {
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");
}
}
};
这样在打包的时候就不会有warning提示了，可参考WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
但是在index.html文件中，如果引用本地图片会有问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<% if(htmlWebpackPlugin.options.config.header) { %>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<% } %>
<title><%= (htmlWebpackPlugin.options.config.title) %></title>
</head>
<body>
<img src="./QQ图片20191223192357.jpg" alt="" srcset="">
<img src="../src/assets/QQ图片20191230082601.jpg" alt="" srcset="">
</body>
<% if(htmlWebpackPlugin.options.config.footer) { %>
<script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
<% } %>
</html>
第一张照片引入会报错且页面不显示该图片，第二张照片引入不会报错且页面会显示该图片。
方案一：安装html-withimg-loader
npm install html-withimg-loader -D
修改webpack.config.js文件
module.exports = {
//...
module: {
rules: [
{
test: /.html$/,
use: "html-withimg-loader"
}
]
},
};
运行之后的页面是这样的
我们会发现html文件中的<% if(htmlWebpackPlugin.options.config.header) { %>没有被解析。因为html-withimg-loader与html-loader会产生冲突。所以我们采用方案二去解决本地图片的显示：
<!--index.html-->
<img src="<%= require('./QQ图片20191223192357.jpg') %>" />
以这种方法引入本地图片，并且删除webpack.config.js文件中html-withimg-loader的配置即可。
npm uninstall html-withimg-loader
运行之后的页面是这样的：
2、配置入口字段
module.exports = {
entry: './src/index.js' //webpack的默认配置
}
entry 的值可以是一个字符串、一个数组或一个对象
module.exports = {
entry: [
'./src/index1.js',
'./src/index2.js'
]
}
3、配置出口字段
output 字段可以控制 webpack 如何输出编译文件
module.exports = {
output: {
//路径必须是绝对路径
path: path.resolve(__dirname, "dist"),
//考虑到CDN缓存问题，并且可以指定hash串长度
filename: "bundle.[hash:6].js",
//通常是CDN地址，可以不配置，或者配置为/
publicPath: "/"
},
}
4、为了每次打包前可以清空dist文件，需要配置插件: clean-webpack-plugin
npm install clean-webpack-plugin -D
在plugin数组里面
const {
CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
],
}
如果不希望删除某个文件夹和该文件夹下的文件，可传递参数 cleanOnceBeforeBuildPatterns到clean-webpack-plugin插件中。
//webpack.config.js
module.exports = {
//...
plugins: [
new CleanWebpackPlugin({
//不删除assets目录下的文件
cleanOnceBeforeBuildPatterns:['**/*', '!assets', '!assets/**']
})
]
}
详情可查看我搭建的webpackTest