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

时间:2021-2-20 作者:admin

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。