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

769 阅读3分钟

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

一、webpack是什么?

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

本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

二、安装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:封面图来自@一村那点事儿(侵删)