webpack4打包遇到的问题
基于webpack4的基础上整理的一份打包笔记,记录了本人开发过程中遇到的一些问题和处理方法,css提取,css和html打包后使用相对路径
css文件处理,使用mini-css-extract-plugin插件提取css,
插件 mini-css-extract-plugin
安装 npm i mini-css-extract-plugin --save-dev
配置
修改webpack.dev.config.js文件
// 引入插件
const MinCssExtractPlugin = require('mini-css-extract-plugin');
配置插件作用的地方
module: {
rules: [{
test: /\.css$/,
//从后面开始转化,先css再style
//use用来处理提取的.css文件
use: [
{
loader: MinCssExtractPlugin.loader,
options: {
publicPath: '../', // 用来处理css中图片的路径
}
},
'css-loader'
]
},
plugins: [
new MinCssExtractPlugin({
//异步加载修改
filename: '[name].css',
allChunks: true
}),
]
html和css中的图片路径问题
// 在MinCssExtractPlugin.loader插件后面跟上options单独设置css的处理路径
{
test: /\.less$/,
use: [{
loader: MinCssExtractPlugin.loader,
options: {
publicPath: '../',
}
}