在开始使用webpack
之前么,我们需要对Webpack
的配置有一定的认识。
一、5大核心概念
1. enty(入口)
指示webpack
从哪个文件开始打包
2. output(输出)
指示webpack
打包完的文件输出到哪里去,如何命名等
3. loader(加载器)
webpack
本身只能处理js、json
等资源,其他资源需要借助loader
、webpack
才能解析
4. plugins(插件)
扩展webpack
的功能
5. mode(模式)
主要有两种模式:
● 开发模式:development
● 生产模式:production
二、准备 Webpack 配置文件
在项目根目录下创建文件:webpack.config.js
module.exports = {// 入口entry: "", // 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: "",
};
Webpack
是基于Node.js
运行的,所以采用Common.js
模块化规范
三、修改配置文件
const path = require("path");module.exports = {// 入口entry: "./src/main.js", // 需要用相对路径// 输出output: {// 文件的输出路径// __dirname nodejs的变量,代表当前文件的文件夹目录path: path.resolve(__dirname, "dist"), // 需要用绝对路径 需要用的Nodejs的核心模块 path,专门处理路径问题// 文件名filename: "main.js",},// 加载器module: {rules: [// loader的配置],},// 插件plugins: [// plugin的配置],// 模式mode: "development",
};
四、开发模式介绍
开发模式顾名思义就是我们开发代码时使用的模式。
这个模式下我们主要做两件事:
1、编译代码,使浏览器能识别和运行。
开发时我们有样式资源、字体图片、图片资源、多媒体资源、HTML
资源等,webpack
默认都不能处理这些,我们需要加载配置来编译这些资源
2、代码质量检测,树立代码规范
提前检查代码的一些可以消除一定隐患与Bug
、代码运行起来更加健壮。
提前检查代码规范和格式,统一团队编码风格,让代码更优雅与美观。