webpack配置-基础配置

理解了webpack五大核心，现在开始动手配置基础的webpack.config.js文件吧

本片文章主要是一些webpack的基础配置

1.说一下为嘛使用一些loader

在webpack中，这个工具只识别 js和json 这两种格式，别的格式或者说资源在webpack中是不认可的。例如：css文件、less文件、图片资源、图标资源等等，这时候就需要用一些loader来对它们进行编译处理。

2.介绍本篇文章需要用到的loader和插件

• html-webpack-plugin
  作用：匹配自己定义的html模板
• style-loader
  作用：创建style标签，将js中的样式资源添加到head标签中生效
• css-loader
  作用：将css文件变成commonjs模块加载js中，里面内容是样式字符串
• less
  作用：识别less文件
• less-loader
  作用：将less文件编译成css文件
• url-loader
  作用：处理样式中的图片
• file-loader
  作用：处理其余的资源（icon图标等）
• html-loader
  作用：处理html文件的img图片(负责引入img,从而能被url-loader进行处理)

3.如何使用上面所说的loader和插件呢？

在敲代码之前，一定要先安装上面的包

安装命令: npm install -D 上面的包名，使用空格将包名分开进行多个安装
例如：npm install -D url-loader html-loader less

如果npm安装报超时的错误，建议使用淘宝镜像

安装淘宝镜像命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完淘宝镜像之后，就可以使用淘宝镜像进行安装了，命令如下：
cnpm install -D url-loader html-loader less
以后下载别的包也是使用 cnpm 进行下载就可以了

由于我在VScode中编写了关于webpack的配置，所以我在这里直接把我的代码粘贴过来，里面是有超详细的注释介绍的。是不是有的小伙伴看到这里就感觉作者好懒啊。。(●’◡’●)，嘻嘻，我的懒是出名的哟~~ 可以看我的个人资料中的简介。。。

/* 
webpack.config.js   webpack的配置文件 
  作用：运行webpack指令时，会加载这里面的配置
  执行顺序；优先执行当前目录webpack，没有则向上一级目录查找，直到全局webpack

  所有的构建工具都是基于nodejs平台运行的~ 模块化默认采用的是commonjs语法
*/


// 从node内部导入用来拼接绝对路径的resolve的方法(使用commonjs语法)
const { resolve } = require('path')

// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // webpack的5大核心配置属性

  // 1.入口文件
  entry: './src/index.js',

  // 2.输出文件
  output: {
    // 输出文件名
    filename: 'bundle.js',
    // 如果要想进行分类，就要在文件名前面加上一个js文件夹
    // filename: 'js/bundle.js',
    // 输出路径  一般是绝对路径
    // __dirname  nodejs的变量，代表当前文件目录的绝对路径
    path: resolve(__dirname, 'bundle')
  },

  // 3.loader的配置
  module: {
    rules: [
      // 详细的loader配置
      // 不同的文件需要配置不同的loader
      {
        // test 匹配的文件（正则表达式，匹配以.css结尾）
        test: /\.css$/,
        // use 使用哪些loader进行处理
        use: [
          // use数组中的执行顺序：从右到左，从下到上
          // 创建style标签，将js中的样式资源添加到head标签中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要安装less和less-loader包
          'less-loader'
        ]
      },
      {
        // 配置图片loader
        test: /\.(png|jpg|gif|jpeg)$/,
        // 配置一个loader时，用loader属性。配置多个loader时，使用use
        // 下载url-loader和file-loader
        loader: 'url-loader',
        // options 对图片进行一些选择性配置
        options:{
          // limit 限制图片大小,
          // 如果图片小于8Kb,就会被base64处理
          //    优点:减少请求数量(减轻服务器压力)  缺点:图片体积会更大(文件请求速度会更慢)
          // 大于限制值时，就会提示安装一个file-loader
          //    安装完之后再打包，会对大于limit的图片进行打包，之后会以哈希值(防止名字重复)命名
          limit: 8 * 1024,
          // 问题:因为url-loader默认使用ES6模块化解析,而html-loader引入图片是commonjs模块
          // 解析时会出问题: [object Module]
          // 解决:关闭url-loader的ES6模块化,使用commonjs解析
          esModule:false,
          // 给图片进行重命名
          // [hash:10] 取图片hash值的前10位
          // [ext] 取文件的原来的扩展名
          name: '[hash:10].[ext]',
          // 如果想让图片放在同一个文件夹中，使用outputPath
          outputPath: 'imgs'
        }
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片(负责引入img,从而能被url-loader进行处理)
        loader: 'html-loader'
      },
      // 打包其它资源（除了js、html、css资源以外的资源）
      {
        // exclude 排除css、js、html资源
        exclude: /\.(js|html|css|less)$/,
        loader: 'file-loader'
      }
    ]
  },

  // 4.plugins的配置
  plugins: [
    // 详细的plugin配置
    // html-webpack-plugin
    // 功能：默认创建一个空的html文件，自动引入打包输出的所有资源（js、json）
    // 需求：需要有结构的html文件
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js、json）
      template: './src/index.html'
    })
  ],

  // 5。mode配置(模式配置)
  mode: 'development' // 开发模式
  // mode: 'production' // 生产模式
}

4.跑代码看效果

看到这里，相信小伙伴们已经开始跃跃欲试了，想要看看自己敲了好长的代码实现的效果了。
在自己的项目中，使用下面命令让代码跑起来看效果
webpack
这个命令是将所有的模块进行打包处理，最终在bundle文件夹下生成一个bundle.js文件和一个index.html文件，如果有图片资源，也会生成一个图片文件（这个图片大小是大于limit的限制值的），如果是小于limit的限制值，则会被编译为字符串存放在bundle.js文件中。

5.建议

初学者，一定一定要多敲代码，代码敲多了会出现质变的。我是一直坚信这个说法的。我的亲身经历就是，敲代码敲的多了，脑子就控制不住手了，看到相同的代码，手下意思的就敲出了正确的代码。再给你们透露一个我糗事，不要向外说哦🤭，本来不认识的单词，手自动敲出来了，而脑子还在想这个单词怎么拼写的~~
小伙伴们，我的文章到这里就结束了，下篇文章要开始写关于css的配置了，请小伙伴们多多点赞哦~~