这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战
postcss-loader 为样式自动加上后缀
postcss-loader 为样式自动加上前缀,解决c s s3兼容问题,postcss.config.js文件配置postcss
- 安装
npm i postcss-loader autoprefixer -D
//webpack.config.js
{
test:/.css$/,
use:["style-loader","css-loader","postcss-loader"]
}
//postcss.config.js
let autoprefixer = require("autoprefixer")
module.exports = {
plugins: [
require("autoprefixer")(
{
overrideBrowserslist: ["last 2 versions", ">1%"]
})
]
};
file-loader
当我们需要模块,仅仅是从源代码挪移到打包目录下,就可以使用file-loader来处理,例如txt,svg,excel,图片等
- 安装
npm install file-loader -D
{
test:/.jpg|png|jpe?g|gif$/,
use:[
{
loader:"file-loader",
options:{
//ext为文件后缀名
name:'[name].[ext]',
//打包后文件存放位置
outputPath:"./images/"
}
}
]
}
url-loader
url-loader 包含file-loader file-loader能实现的功能url-loader都能实现,推荐使用url-loader,因为多一个limit参数 limit:2*1024 单位是字节,小于设置的这个值,图片转化为base64 推荐小体积图片转成base64
- 安装
npm install url-loader -D
{
loader:"url-loader",
options:{
//打包后文件名称 占位符
name:'[name].[ext]',
//打包后文件输出路径
outputPath:"./images/",
//当文件大小小于设定的这个值的时候会将文件转成base64,大于这个设置值的时候就会正常将图片挪移到打包目录下
limit:5*1024 //单位是字节
}
}
plugin
html-webpack-plugin 默认支持ejs模版语法
读取源代码中某个html文件,自动生成到打包后目录中,并 把打包生成的js模块引⼊到该html中。 参数: filename 输出文件名,也可以带目录 title 生成页面的title 配合页面中设置 <%=htmlWebpackPlugin.options.title %> template 模板文件路径 mi nify 压缩
- 安装
npm install html-webpack-plugin -D
- 配置
plugins:[
//默认配置,读取src/index.html 输出到dist目录下
new HtmlWebpackPlugin()
]
//自定义配置
plugins:[
new HtmlWebpackPlugin({
//输出页的title
title:"首页",
//输出文件名,也可以带目录
filename:"html/main.html"
})
]
clean-webpack-plugin
自动清理di s t文件夹
- 安装
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [ new CleanWebpackPlugin() ]
mini-css-extract-plugin
将css提取到单独的文件中
- 安装
npm install mini-css-extract-plugin -D
- 配置
{
test:/.css$/,
use:[
//不用style-loader用MiniCssExtractPlugin
// "style-loader",
MiniCssExtractPlugin.loader,
"css-loader","postcss-loader"
]
},
//plugins
new MiniCssExtractPlugin(
{
filename: "./css/[name]-[contenthash:6].css"
}
)
proxy
跨域问题
proxy: {
"/api": {
target: "http://localhost:9092" }
}