如今各种前端框架大行其道，而大部分框架内部也对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：封面图来自@一村那点事儿（侵删）
点击咨询 