字体文件
webpack 处理字体文件配置
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
# asset/resource 可以帮助我们载入任何类型的资源
type: "asset/resource"
}
]
}
加载数据
如JSON文件,CSV,TSV,XML。类似于:webpack 对 JSON 支持 实际上是内置的,也就是 import Data from “./data.json” 默认是正常的。但是要导入 CSV TSV XML ,需要使用 csv-loader、xml-loader。处理这三类文件。
安装 csv-loader、xml-loader
npm install csv-loader xml-loader -D
在 webpack.config.js 配置 module 参数
module: {
rules: [
{
test: /\.(csv|tsv)$/,
use: "csv-loader"
},
{
test: /\.xml$/,
use: "xml-loader"
}
]
}
在js文件中就可以正常使用 xml 和 csv 文件了。
import data1 from "./data.xml"
import data2 from "./data.csv"
babel-loader
babel-loader 可以将 es6,es7的语法转换为低版本语法。
需要安装三个插件:
npm install babel-loader @babel/core @babel/preset-env -D
在 webpack.config.js 配置 module 参数
module: {
rules: [
{
test: /\.js$/,
# 排除 node_modules 目录下的 js 文件
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
完整的 webpack.config.js 代码如下:
let path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MinCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinmizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
// 入口文件
entry: "./src/index.js",
// 打包后文件
output: {
filename: "bundle.js",
path: path.resolve(__dirname, './dist'),
clean: true, // 每次打包前先删除 dist 目录
// contenthash 表示哈希值
// ext 表示扩展名
assetModuleFilename: "images/[contenthash][ext]"
},
// 模式 development/production
mode: 'development',
// 打包后,可以方便的调试代码。代码的位置和源文件一致。
devtool: "inline-source-map",
// 插件使用。
// HtmlWebpackPlugin 用于自动生成 dist 目录下 index.html 魔板文件
plugins: [
new HtmlWebpackPlugin({
// 根据魔板文件生成
template: "./index.html",
// 生成 dist 目录中 html 的文件名
filename: "app.html",
// 生成的 js 文件 引入到body标签中
inject: "body"
}),
// 把 css 合并成一个文件
new MinCssExtractPlugin({
// 打包文件,放到 dist 下的 styles 目录下
// contenthash 哈希字符串
filename: "styles/[contenthash].css"
})
],
// 指定 dist 作为根路径
devServer: {
static: "./dist"
},
// 配置打包 其它资源文件 规则
module: {
rules: [
{
test: /\.png$/,
type: "asset/resource",
// 打包后文件命名
// 优先级高于 output 下 assetModuleFilename
generator: {
filename: "images/[contenthash][ext]"
}
},
{
test: /\.svg$/,
// 导出资源类型的 dataurl (base64格式)
type: "asset/inline"
},
{
test: /\.txt$/,
// 导出资源的源代码
type: "asset/source"
},
{
test: /\.jpg$/,
// 会根据 resource / inline 两种方式进行选择
// 默认情况下,当资源文件大于 8k 选择 resource 模式生成资源
// 当资源文件小于8k 选择 inline 生成 base64 数据。
type: "asset",
parser: {
dataUrlCondition: {
// 设置临界值,超过 maxSize 就会 使用 asset/resource 模式,否则使用 asset/inline 生成 base64 代码
maxSize: 4 * 1024 * 1024 // 4 M
}
}
},
{
test: /\.(css|less)$/,
// loader 执行顺序是从右到左(三个loader位置不能颠倒)
use: [MinCssExtractPlugin.loader, 'css-loader', 'less-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
// asset/resource 可以帮助我们载入任何类型的资源
type: "asset/resource"
},
{
test: /\.(csv|tsv)$/,
use: "csv-loader"
},
{
test: /\.xml$/,
use: "xml-loader"
},
{
test: /\.js$/,
// 排除 node_modules 目录下的 js 文件
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
},
// 优化配置
optimization: {
minimizer: [
new CssMinmizerPlugin()
]
}
}