如今各种前端框架大行其道,而大部分框架内部也对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:封面图来自@一村那点事儿(侵删)