1.webpack 打包图片资源+其他资源（如字体库阿里矢量图）
// webpack.config.js webpack的配置文件
// 作用：指示webpack 干哪些活（当你运行webpack指令时，会加载里面的配置）
// 所有构建工具都是基于node js平台运行的～ 模块化默认采用common.js
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack 配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'build.js',
// 输出路径
// __dirname nodejs 的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置
module: {
rules: [
// 详细loader配置
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
}, {
test: /\.less$/,
// 使用哪些loader进行处理
//使用多个loader处理 用use
use: [
// 创建style标签，将js中样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader',
//将less文件编译成css文件
//需要下载less 和less-loaders
'less-loader'
]
}, {
//打包其他资源
// 排除 css less js html 资源
exclude: /\.(css|less|js|html)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}, {
// 问题：默认处理不了html 中的img图片
test: /\.(jpg|png|gif|jpeg)$/,
// 需要下载url-loader 和 file-loader
loader: 'url-loader',
options: {
// 图片大小小于8kb，就会被base64处理，
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit: 8 * 1024,
esModule: false,
// 给图片进行重新命名
// [hash:10] 取哈希值的前十位
// [ext] 取文件原来的扩展名
name: '[hash:10].[ext]'
}
}, {
test: /\.html$/,
// 处理html 文件的img图片（负责引入img，从而能被url-loaderurl-loader进行处理）
loader: 'html-loader',
}
]
},
// plugins 的配置
plugins: [
// 详细plugins的配置
// html-webpack-plugin 默认会创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
//复制 ./src/index.html 文件 并自动引入打包输出的所有资源（js/css）
template: './src/index.html'
})
],
// 模式
mode: 'development', //开发模式
// mode: 'production', //生产模式
}
