目录
此节内容我们要对 webpack 的基本配置做一些了解。
webpack配置五大概念
1.entry(入口)
指示 Webpack 从哪个文件开始打包
2.output(输出)
指示 Webpack 打包完的文件输出到哪里去,如何命名等
3.loader(加载器)
webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析
4.plugins(插件)
扩展 Webpack 的功能
5.mode(模式)
主要由两种模式:
- 开发模式:development
- 生产模式:production
webpack配置文件设置
需要在项目根目录下新建 webpack 配置文件:webpack.config.js(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: 输出文件名 在dist目录下
filename:"static/main.js",
//自动清空上次打包结果,即打包前将path目录整个清空
clean:true,
},
// 加载器,用来处理其他资源
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
设置了webpack的基础配置后,就可以使用如下简单指令对入口文件所涉及到的 Js 资源进行打包了。但样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要在 webpack 配置文件的 module 加载器中的 rules 配置来编译这些资源,后续章节会详细讲到。