这一步将css分离出来,需要用到分离插件,有两种:
安装
npm install extract-text-webpack-plugin --save--dev
调用
调用这个需要重新修改css的loader的配置
{
test: /\.(sc|c)ss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'sass-loader'
]
})
}
配置
因为这是个插件,所以需要在plugins里面配置
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
plugins: [
new ExtractTextWebpackPlugin('./assets/css/styles.[chunkhash:8].css')
]
这个实例里面的参数可以是文件名字,也可以是文件路径字符串
安装
npm install mini-css-extract-plugin --save-dev
调用
{
test: /.(sc|c)ss$/,
use: [
‘style-loader‘,
{
loader: MiniCssExtractPlugin.loader,
options: {}
},
{
loader: ‘css-loader‘,
options: {
importLoaders: 1,
}
},
{
loader: ‘postcss-loader‘,
options: {
sourceMap: true,
plugins: [
require(‘autoprefixer‘)({browsers: ‘last 2 version‘})
]
}
},
‘sass-loader‘
],
exclude: /node_modules/,
include: path.resolve(__dirname, ‘src‘)
}
配置
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
new MiniCssExtractPlugin({ filename:'css/index.css' })
这里分离后,我们发现图片路径不对了,因为我们是本地打包运行,使用的是相对路径,所以我们需要修改一下image配置publicPath
publicPath: '../../assets/images'
原文:https://www.cnblogs.com/zjh-study/p/10863459.html