webpack -- 完整入门学习笔记（五）

一、分离css

这一步将css分离出来，需要用到分离插件，有两种：

1、extract-text-webpack-plugin

安装

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')
]

这个实例里面的参数可以是文件名字，也可以是文件路径字符串

2、mini-css-extract-plugin

安装

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'