webpack学习学习笔记(2) - webpack的基本配置

5 大核心概念

entry（入口）
- 指示 Webpack 从哪个文件开始打包
output（输出）
- 指示 Webpack 打包完的文件输出到哪里去，如何命名等
loader（加载器）
- webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析
plugins（插件）
- 扩展 Webpack 的功能
mode（模式）

主要由两种模式：

开发模式：development
生产模式：production

准备`webpack`配置文件

在项目根目录下新建文件：webpack.config.js

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范

修改配置文件

配置文件

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径
        // 输出文件名(打包后在输出路径当中生成的文件夹名)
        filename:"main.js"
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],
    // 模式
    mode:"development"//开发模式
};

运行指令
npx webpack

此时功能和之前一样，也不能处理样式资源,后面Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事：
- 编译代码，使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
- 代码质量检查，树立代码规范
提前检查代码的一些隐患，让代码运行时能更加健壮。
提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

webpack学习学习笔记(2) - webpack的基本配置

5 大核心概念

准备webpack配置文件

修改配置文件

开发模式介绍

准备`webpack`配置文件