【webpack参数配置系列】之配置你的第一个webpack

如今各种前端框架大行其道，而大部分框架内部也对webpack配置做了隐藏，目的当然是让你用起来更方便，降低你的学习成本。但是这也让webpack对于我们更像是一个黑盒，只知道如何使用脚本命令，而对于其内部的参数配置以及底层原理了解甚少。所以我打算出一个系列来讲一讲webpack的参数配置，和大家一起学习webpack。

一、webpack是什么？

在webpack的中文文档上有这么一段官方定义

二、安装webpack

//初始化包，生成package.json
npm init 

//这里最好是在项目中安装webpack，而不是全局安装，因为不同项目需要的webpack版本可能不一样
//安装webpack-cli的目的是为了在命令行中能正确运行webpack指令，不安装的话是运行不了的
npm install webpack webpack-cli --save-dev

//此时用webpack -v是查看不了版本的，因为那样node会到全局去找webpack，应该使用npx webpack -v来查看版本
npx webpack -v

三、代码场景

新建一个src目录，然后创建以下JS文件作为我们的业务代码

//header.js
function Header() {
	var dom = document.getElementById('root');
	var header = document.createElement('div');
	header.innerText = 'header';
	dom.append(header);
}

module.exports = Header;

//content.js
function Content() {
	var dom = document.getElementById('root');
	var content = document.createElement('div');
	content.innerText = 'content';
	dom.append(content);
}

module.exports = Content;

//sidebar.js
function Sidebar() {
	var dom = document.getElementById('root');
	var sidebar = document.createElement('div');
	sidebar.innerText = 'sidebar';
	dom.append(sidebar);
}

module.exports = Sidebar;

//index.js
var Header = require('./header.js');
var Sidebar = require('./sidebar.js');
var Content = require('./content.js');

new Header();
new Sidebar();
new Content();

然后新建一个dist目录，在里面创建一个index.html文件，并在script标签中引入打包后的JS文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>document</title>
</head>
<body>
	<div id='root'></div>
	<script src='./bundle.js'></script>
</body>
</html>

四、配置webpack参数

webpack参数要在webpack.config.js中配置，所以我们先来新建一个webpack.config.js文件，然后一起来学习最简单的参数配置。

这里需要注意的是，path后面要写一个绝对路径，所以我们需要引入一个node的核心模块，然后调用这个模块的resolve方法，把__dirname这个node里面的变量（它指的就是当前webpack.config.js所在的目录的路径）和dist做一个结合。这样就生成了dist文件夹的绝对路径了。

//在webpack.config.js中做如下配置

//引入一个node的核心模块
const path = require('path');

module.exports = {
	//entry是项目打包的入口文件，指从哪一个文件开始打包
	entry: './src/index.js',
    	//output里面是一些关于输出的配置
	output: {
    		//filename参数是给打包好的文件取名字
		filename: 'bundle.js',
        	//path参数可以指定打包好的文件放在哪个文件夹下，而path需要一个绝对路径，所以我们
            	//需要引入一个node核心模块，然后调用这个模块的resolve方法，把__dirname这node里面
                //的变量（它指的就是当前webpack.config.js所在的目录的路径）和dist做一个结合，
                //这样就生成了dist文件夹的绝对路径了。
		path: path.resolve(__dirname, 'dist')
	}
}

当然，我们还可以在package.json中配置脚本命令，使得我们的打包命令更简洁

"scripts": {
    "bundle": "webpack"
  },

最后，在当前根目录下运行npm run bundle就可以完成对index.js文件的打包。此时，将index.html文件拖到浏览器中就可以看到页面正确显示了

这里讲的都是webpack最基本的入门配置，webpack的配置参数可以说多如牛毛，还有很多基础配置比如说像loader和plugin。loader可以帮我们打包除JS之后的文件，例如CSS文件和图片。而plugin插件可以帮我们完成很多功能，使我们的打包变得更便捷。这些更进一步的配置会在后面的系列中讲解，敬请期待。

PS：封面图来自@一村那点事儿（侵删）