1.下载css-loader

我们上一篇文章讲的是如何配置webpack5,当然上一篇文章我们引用的只是js文件并没有引用css文件，那么webpack可不可将我们的css一起进行打包呢？我们现在先来试一下。直接创建一个css文件夹，创建style.css文件，写入一下代码：

我们现在尝试着去打包看是否会成功

现在出现了报错，提示我们需要引用loader,现在我们根据提示点开上图中的网址https://webpack.js.org/concepts/#loaders实际需要进入的是https://webpack.js.org/loaders/这个页面

我们需要下载两个loader分别是style-loader,css-loader

npm install --save-dev style-loader
npm install --save-dev css-loader

下载完就完了吗？没有的，我们还要在webpack.config.js中进行配置如下

module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

现在我们再来运行一下

2.下载file-loader(打包图片用到的加载器)

完成了加载css文件的打包，那么如果需要打包图片应该需要什么加载器呢，为了验证我们将css文件里的背景改为背景图片。

我们需要安装file-loader这个加载器

$ npm install file-loader --save-dev

现在这个已经加载器已经安装完毕，还有webpack.config.js一定不要忘记配置了哦！

module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },

好的，下面我们来看一下运行结果吧

3.安装html-webpack-plugin插件

html-webpack-plugin 插件是用来出来html文件用的，可以在内存中生成html文件。

//安装代码如下
npm install --save-dev html-webpack-plugin


//webpack.config.js的配置代码如下
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],

4.安装webpack-dev-server插件

webpack-dev-server这个插件可以让我们实时的去监看我们修改的代码，不需要我们在每次修改后就再次打包。可以在修改完成代码后直接刷新浏览器就可以监控到实时的效果。当然这也需要一定的配置。

npm install webpack-dev-server --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {

        test:/\.vue$/,

        use:{

          loader:'vue-loader'

        }

      }
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,
    port: 9000,
  },
  plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
  mode: 'production',
};

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    open: true,
    port: 9000,
  },
//这一坨代码就是我们要加入的代码啦

由于小编使用webpack和webpack-dev-server都是最新版本的，最新版本的有一个不兼容的问题，小编不知道这是否正常。如果你使用的也都是最新版本的话，可以使用下面的语句来执行

npx webpack serve