npm install --save-dev file-loader url-loader
文件中的图片分为三种，在css中引入，在js中引入，在html中引入
处理css，js中图片
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: ‘file-loader‘,
options: {
name:‘assets/[name].[ext]‘,
}
}
},
直接使用file-loader。url-loader进行配置即可，但是要注意在output(出口)中加入publicPath:‘/‘
module.exports= {
entry:__dirname +‘/src/index.js‘，
output:{
path:__dirname+‘/dist‘,
filename:‘bundle.js‘，
publicPath:‘/‘ //需要在图片上传的时候添加
}
}
}
在html中的图片不能被直接打包，需要借助html-withimg-loader
npm install html-withimg-loader --save
在webpack.config.js中配置
module.exports ={
test:/\/.(htm|html)$/,
use:[‘html-withimg-loader‘]
}
htmlwenpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中
npm install --save-dev html-webpack-plugin
配置
title: ?用来?生成?页?面的 title 元素
filename: 输出的 HTML ?文件名，默认是 index.html, 也可以直
接配置带有?子?目录。
template: 模板?文件路路径，?支持加载器?，?比如
html!./index.html
inject: true | ‘head‘ | ‘body‘ | false ,注?入所有的资
源到特定的 template 或者 templateContent 中，如果设置为
true 或者 body，所有的 javascript 资源将被放置到 body 元
素的底部， ‘head‘ 将放置到 head 元素中。
favicon: 添加特定的 favicon 路路径到输出的 HTML ?文件中。
minify: {} | false , 传递 html-minifier 选项给 minify
输出
hash: true | false, 如果为 true, 将添加?一个唯?一的
webpack 编译 hash 到所有包含的脚本和 CSS ?文件，对于解除
cache 很有?用。
cache: true | false，如果为 true, 这是默认值，仅仅在?文件
修改之后才会发布?文件。
showErrors: true | false, 如果为 true, 这是默认值，错误
信息会写?入到 HTML ?页?面中
chunks: 允许只添加某些块 (?比如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到?页?面之前的排序?方式，?支持
的值： ‘none‘ | ‘default‘ | {function}-default:‘auto‘
excludeChunks: 允许跳过某些块， (?比如，跳过单元测试的块)
案例:
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports={
...
plugins:[
new htmlWebpackPlugin({
title:"My App",
filename:"app.html",
template:"./src/index.html"
})
]
}
需要注意想要在打包的html的文件中生成正确的title，需要在原来的html模板上进行以下修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= webpackConfig.title %></title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
因为htmlwenpackplugin默认识别的ejs语法
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require("cleanwebpack-plugin");
...
plugins: [
new CleanWebpackPlugin()
]
需要注意的是引入的时候需要加上括号
const MiniCssExtractPlugin = reqirue("mini-css-extract-plugin")
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,"css-loader"]
}
new MiniCssExtractPlugin({
filename:[name][chunkhash:8].css
})
需要注意引入的时候还需要引入loader MiniCssExtractPlugin.loader
每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦，我们可以安装使用webpackdevserver来改善这块的体验
npm install webpacl-dev-server -D
修改下package.json
"scripts":{
"server":"webpack-dev-server"
}
在webpack.config.js配置：
devServer{
contentBase:"./dist",
open:true,
port:8081
}
npm run server
启动服务后，会发现dist目录没有了，这是因为devServer把打包后的模块不会放在dist目录下，而是放到了内存中，从而提升速度
原文：https://www.cnblogs.com/lrgupup/p/14275333.html
