9 ---＞ 开发环境的搭建

处理less资源

{
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },

处理css资源

{
        test: /\.css$/,
        use: ['style-loader', 'css-loader',]
      },

处理样式中的图片资源

{
        //处理样式中的图片资源
        test: /\.(jpg|png|gif)$/,
        //这里url-loader是基于file-loader的新封装的一个库
        // 比file- loader多一个limit压缩功能
        loader: 'url-loader',
        options: {
          //限制图片资源，对指定大小的图片转base64
          limit: 8 * 1024,
          //对名字的限制，去哈希值的前10位
          name: '[hash:10].[ext]',
          //需要设置es6模块化关闭
          esModule: false
        }

      },

专门处理html中img的图片

{
        test: /\.html$/,
        loader: 'html-loader',
      },

处理其他资源

{
        exclude: /\.(html||js||css||less|jpg||png||gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
        }
      }

插件处理

plugins: [
    //处理html资源
    new HtmlWebpackPlugin({
      //选择这个文件为模板
      template: './src/index.html'
    })
  ],

热更新

devServer: {
    contentBase: resolve(__dirname, 'build'),
    //启动gzip压缩
    compress: true,
    port: 3000,
    open: true
  }

完整代码

/*
 * @Author: zyl
 * @Date: 2021-07-14 13:46:53
 * @LastEditors: zyl
 * @LastEditTime: 2021-07-14 14:32:59
 * 开发环境的配置：
 * 能让代码运行
 */
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js', //这里可以更改，比如我们是想输出到JS文件夹下方，可以写成 js/built.js
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      //loader规则
      //处理less资源

      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      //处理css资源
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader',]
      },
      {
        //处理样式中的图片资源
        test: /\.(jpg|png|gif)$/,
        //这里url-loader是基于file-loader的新封装的一个库
        // 比file- loader多一个limit压缩功能
        loader: 'url-loader',
        options: {
          //限制图片资源，对指定大小的图片转base64
          limit: 8 * 1024,
          //对名字的限制，去哈希值的前10位
          name: '[hash:10].[ext]',
          //需要设置es6模块化关闭
          esModule: false,
          //图片在这里也可以使用路径输出控制
          outoutPath:'imgs' //输出到imgs文件夹下方
        }

      },
      //专门处理html中img的图片
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
      //处理其他资源
      {
        exclude: /\.(html||js||css||less|jpg||png||gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
        }
      }

    ]
  },
  plugins: [
    //处理html资源
    new HtmlWebpackPlugin({
      //选择这个文件为模板
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    //启动gzip压缩
    compress: true,
    port: 3000,
    open: true
  },
  mode:'development'
}

我们新建的less以及使用的字体文件，都需要引入到我们的入口文件中建立依赖
启动使用npx webpack-dev-server
图片、其他资源也可以指定输出路径，使用

  outoutPath:'所想要指定的路径'

样式文件是直接打包在js中