前端必备技能 webpack - 3. webpack基本配置

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。
 
点这里查看 webpack 系列文章目录
 
博客中的代码位于 码云Git仓库，如有需要可自行前往下载。

前端必备技能 webpack - 3. webpack基本配置

  我们来前面的博客：1. webpack简介 中已经介绍了 webpack 的几个核心概念，这同时也是 webpack 的基本配置项。

// webpack.config.js

const path = require('path');

module.exports = {
   
	// 入口 指定打包入口文件地址
	entry: './src/index.js',
	// 出口 指定打包完成后输出的文件地址及名称
	output: {
   
		// 文件名为 index.js
		filename: 'index.js',
		// 输出路径为当前路径下的 dist 文件夹中
		path: path.resolve(__dirname, './dist')
	},
	// loader
	module: {
   
		rules: []
	},
	// 插件
	plugins: [],
	// 打包模式为 开发模式
	mode: "development"
};

一、入口 entry

  entry 可以设置为三种类型：

• 字符串：指定一个入口文件，只打包与该文件有关联的文件；

// 指定打包入口文件路径
entry:"./src/index.js"

• 数组：将数组内的多个文件打包到一个 Chunk 中；

// 将 index.js 和 a.js 打包到同一个文件内
entry: ["./src/index.js", "./src/a.js"]

• 对象：指定多个文件作为入口文件，分别打包，适用于多页类型应用，属性名就是文件名；

// 多入口文件，
entry:{
   
	index: "./src/index.js",
	first: "./src/a.js",
	second: "./src/b.js"
}

二、出口 output

  为了防止打包输出时发生路径错误的问题，我们会引用 node 的 path 模块来处理不同操作系统间的文件路径问题，基本的使用方法如下：

// 引入 path 模块中的 resolve 方法 该方法可以用来处理绝对路径
const {
    resolve } = require("path");
// __dirname 是 NodeJS 中的一个变量，代表当前文件所在目录的绝对路径
// 第二个参数是文件夹名称， resolve 方法帮我们将路径拼接到一起
const filePath =