从零开始学webpack笔记 4

自行学习整理，边学边记，没了解过webpack的同学可以一点点看完，或许会有些帮助，不成熟的地方欢迎指正，转载请注明出处！！！

上篇文章我们已经把css进行了打包，但把所有css放进html不是个好办法，所以这篇我们把css提取成单独的文件

1，安装mini-css-extract-plugin插件

大家可能会看到有些教程使用extract-text-webpack-plugin这个插件的，这个是旧版本webpack使用的，在新版使用可能会遇到兼容性问题，到了webpack4+，请使用mini-css-extract-plugin
先进行安装

npm i mini-css-extract-plugin -D

2，引入并使用，先看代码

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = () => {
  return {
    // entry: path.resolve(__dirname, 'src/index.js'),
    // entry: path.resolve(__dirname, 'src', 'index.js'),
    entry: {
      index: [path.resolve(__dirname, 'src/index.js')]
    },
    output: {
      filename: 'js/[name].js',
      path: path.resolve(__dirname, 'build'),
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: 'css/[name].css',
      }),
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            // {
            //   loader: 'style-loader'
            // },
            // 'style-loader',
            MiniCssExtractPlugin.loader,
            // {
            //   loader: 'css-loader',
            //   options: {
            //     modules: true
            //   }
            // },
            'css-loader',
          ]
        }
      ]
    }
  }
}

这里我们取消了style-loader，转为使用MiniCssExtractPlugin.loader
并在plugins中启用插件并进行一些自定义配置，比如filename文件名
这样我们就基本使用了css文件单独提取的功能