webpack中的插件

1.自动生成html文件。
1.1下载插件
yarn add html-webpack-plugin -D
1.2-webpack.config.js中的配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: ‘./public/index.html’ })]}
2.加载器-处理css文件问题。
2.1 下载依赖包
yarn add style-loader css-loader -D
2.2webpack.config.js配置
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {
// …其他代码
module: {
rules: [ // loader的规则
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 208: …er"] }̲ ] …/,
// 使用less-loader, 让webpack处理less文件, 内置还会用less翻译less代码成css内容
use: [ “style-loader”, “css-loader”, ‘less-loader’]
}
]
}
4.-加载器-处理图片文件
如果webpack5版本直接配置在webpack.config.js - 的 rules里即可
{
test: /.(png|jpg|gif|jpeg)KaTeX parse error: Expected 'EOF', got '}' at position 23: … type: 'asset' }̲ 如果你用的是webpack4…/i,
use: [
{
loader: ‘url-loader’, // 匹配文件, 尝试转base64字符串打包到js中
// 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
options: {
limit: 8 * 1024,
},
},
],
}
5.-加载器-处理字体文件
webpack5使用这个配置
{ // webpack5默认内部不认识这些文件, 所以当做静态资源直接输出即可
test: /.(eot|svg|ttf|woff|woff2)KaTeX parse error: Expected 'EOF', got '}' at position 98: …6][ext]' } }̲ webpack4及以前使用下…/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 2 * 1024,
// 配置输出的文件名
name: ‘[name].[ext]’,
// 配置输出的文件目录
outputPath: “fonts/”
}
}
]
}
6.-加载器-处理高版本js语法
6.1下载依赖包
yarn add -D babel-loader @babel/core @babel/preset-env
6.2webpack.config.js 配置
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’]
}
}
}
]
}
7.webpack开发服务器
7.1webpack-dev-server自动刷新
下载依赖包
yarn add webpack-dev-server -D
7.2配置自定义命令
scripts: {
“build”: “webpack”,
“serve”: “webpack serve”
}
7.3运行命令
yarn serve #或者 npm run serve
7.4webpack-dev-server配置
module.exports = {
// …其他配置
devServer: {
port: 3000 // 端口号
}
}