Webpack5入门到原理3：基本配置

在开始使用 Webpack 之前，我们需要对 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 模块化规范

修改配置文件

服务器托管网

配置文件

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
 // 入口
 // 相对路径和绝对路径都行
 entry: "./src/main.js",
 // 输出
 output: {
  // path: 文件输出目录，必须是绝对路径
  // path.resolve()方法返回一个绝对路径
  // __dirname 当前文件的文件夹绝对路径
  path: path.resolve(__dirname, "dist"),
  // filename: 输出文件名
  filename: "main.js",
 },
 // 加载器
 module: {
  rules: [],
 },
 // 插件
 plugins: [],
 // 模式
 mode: "development", // 开发模式
};

运行服务器托管网指令

npx webpack

此时功能和之前一样，也不能处理样式资源

小结

Webpack 将来都通过 webpack.config.js 文件进行配置，来增强 Webpack 的功能

我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: ASP.NET Core MVC应用模型的构建[3]: Controller的收集

从编程的角度来看，一个MVC应用是由一系列Controller类型构建而成的，所以对于一个代表应用模型的ApplicationModel对象来说，它的核心就是Controllers属性返回的一组ControllerModel对象，每个ControllerMod…