webpack配置-理解五大核心（适合刚入门的阅读,大佬也可以帮指正下不对的地方）

本篇文章适合初识模块化管理的童鞋

1.什么是Webpack

引用官方话语

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在开始前你需要先理解四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

在下面的文章中我多加一个核心：模式(mode)

相信很多童鞋对官方的概念理解的稀里糊涂吧🤭，刚开始的我也是这个样子滴。我用大白话简单的说一下哈：
在解释webpack前，大家要先理解一下模块化开发这个概念，意思呢就是：把每一个文价（js、css、less、vue等）都当作一个模块进行开发。每个模块都有对应的依赖关系，打个简单的比方：main.js文件需要一个函数，而这个函数定义在了另一个add.js文件中，这时就可以将add.js导入到main.js文件中，这时这两个js文件就形成了依赖关系，依赖关系多了就形成了依赖树状图。在这个时候就需要webpack这个工具进行将这些文件打包成一个或多个文件，也可以理解为编译成一个文件或整合到一块。

五个核心概念呢，在下面会进行详细的说明

2.安装webapck

在安装webpack前，需要安装nodejs，安装流程可以参考2020 图文说明 最新node安装和环境变量配置

全局安装

npm install -g webpack webpack-cli

局部安装

npm install --save-dev webpack

安装注意事项

webpack 3.x及以下，webpack-cli与webpack在同一个包中
现在webpack 4.x以上，webpack-cli与webpack分离了，
所以小可爱们，安装最新版本时，一定要先全局安装webpack-cli，再局部安装webpack。当然也可以都全局安装，也可以都局部安装，只是局部安装时会出现错误，这个错误的解决办法就是运行webpack时，要指定目录运行：node_modules/.bin/webpack 。这样会比较麻烦，既然有了麻烦那就要解决，解决方法就是在初始化之后的package.json文件中的scripts属性中加入运行的代码，加入怎样的代码这就看大家的习惯了。
说多了，开始回归正题哈。
当然也可以指定安装的webpack版本，局部安装webpack 3.x，这个方法可以参考，学习时用，建议大家使用最新版本，多了解了解新的知识总归没错的😄
npm install -D webpack@3.6.0
最终，我建议大家全局安装webpack和webpack-cli，项目中用到再局部安装一个webpack就行了，上面说那么多就当了解了解知识了。

3.准备工作

在这里我就不演练怎么创建html文件等等其它的了
安装完webpack之后，在自己的本地项目中初始化。命令如下：
快速初始化： npm init -y
执行完上面的初始化命令后，在自己的本地项目中出现一个package.json文件
在自己的项目中创建一个文件：webpack.config.js 文件，之后的操作都是在这个文件中进行演练。（注意：webpack.config.js 文件是从属于webpack的基础配置文件夹）上图。。。。（我这个忘记初始化了，不过问题不大，不影响后面的内容）

4.基础配置（5大核心）

可以直接看文章的最后，有全部的代码展示及注释

module.exports = {}  // 作用：将配置的内容导出

  // 1.入口文件:以index.js为根，查找依赖关系
  entry: './src/index.js'

  // 2.输出文件：将打包之后的文件输出到指定的目录
  output: {
    // 输出文件名
    filename: 'bundle.js',
    // 如果要想进行分类，就要在文件名前面加上一个js文件夹
    // filename: 'js/build.js',
    // 输出路径  一般是绝对路径
    // __dirname  nodejs的变量，代表当前文件目录的绝对路径
    // resolve方法是引用nodejs内部path变量，需要导入，看文章最后的总代码
    path: resolve(__dirname, 'bundle')
  }

  // 3.loader的配置
  module: {
    rules: [
      // 一个loader对应一个对象
      {}
    ]
  }

  // 4.plugins的配置  在此配置安装的插件
  plugins: []

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

5.完整配置

/* 
webpack.config.js   webpack的配置文件 
  作用：运行webpack指令时，会加载这里面的配置
  执行顺序；优先执行当前目录webpack，没有则向上一级目录查找，直到全局webpack
  所有的构建工具都是基于nodejs平台运行的~ 模块化默认采用的是commonjs语法
*/


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

// 使用commonjs语法导出webpack配置
module.exports = {
  // webpack的5大核心配置属性

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

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

  // 3.loader的配置
  module: {
    rules: [
      // 一个loader对应一个对象
      {}
    ]
  },

  // 4.plugins的配置  使用的插件
  plugins: [],

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

6.结束语

希望本篇文章能对各位小伙伴们有所帮助，有什么不懂的地方可以在评论区说出来，我和评论区的小伙伴们会在评论区进行解答。