Webpack入门及技术指南

「爱情、让人受尽委屈。」 2023-07-03 02:53 1阅读 0赞

# 初识Webpack #

webpack是一个基于node.js编写的资源整合打包器（官方原称：MODULE BUNDLER），通过指定入口文件，他能将该入口文件中引用的所有前端资源都合并打包，并最终输出到你指定的输出目录。

参考资料

> 我为什么要使用Webpack?  [我为什么要使用Webpack? - 简书][Webpack_ -]
> 
> 什么是Webpack?怎么使用Webpack? [什么是Webpack?怎么使用Webpack?\_a\_Keri的博客-CSDN博客][Webpack_Webpack_a_Keri_-CSDN]
> 
> [Nodejs入门及技术指南][Nodejs]：  [Nodejs入门及技术指南\_yan\_dk的专栏-CSDN博客][Nodejs_yan_dk_-CSDN]
> 
> 视频：[手写 Webpack 明白打包原理\_哔哩哔哩\_bilibili][Webpack _bilibili]
> 
> webpack原理解析：[https://blog.csdn.net/baozhiqiangjava/article/details/80603509][https_blog.csdn.net_baozhiqiangjava_article_details_80603509]
> 
> webpack打包原理解析：[webpack打包原理解析 - 简书][webpack_ -]
> 
> webpack打包原理入门探究：[webpack打包原理入门探究（一） - 知乎][webpack_ - 1]
> 
> webpack官方：[https://webpack.js.org            https://webpack.js.org/loaders/][https_webpack.js.org_ _ _ _ _ _ https_webpack.js.org_loaders]

## 安装nodejs ##

可参考上述【[Nodejs入门及技术指南][Nodejs]】进行安装

注意要修改为国内镜像，不然会比较慢或安装不成功。

如下：

![20200131231544286.png][]

> npm config set registry http://registry.npm.taobao.org/

切记要执行这步进行淘宝镜像源配置，不然会很慢，导致后续执行出现问题或错误

## 安装Webpack ##

nodejs安装后，可使用如下命令安装webpack。

>npm install webpack webpack-dev-server -g

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70][]

安装webpack-cli

>npm install webpack-cli -g

![20200131232617845.png][]

>npm install --save-dev webpack

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 1][]

>webpack

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 2][]

注意，这里 可能会报错“如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16][]

需要先设置

> npm init -y

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

执行初始化后，会将依赖包等写入package.json，我们来测试一下

在package.json中加入脚本，如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

"start": "node app.js"

建立app.js只简单写一句：console.log("我已经成功运行了");

在当前目录运行如下：

> npm start

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_18_color_FFFFFF_t_70_g_se_x_16][]

**在这个文件中找到“scripts”节点加入：**

** "dev": "webpack --mode development", // 开发环境**

**"build": "webpack --mode production" // 生产环境**

**如下：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

然后改写配置文件webpack.config.js，加入mode: 'development'

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_15_color_FFFFFF_t_70_g_se_x_16][]

这样再执行webpack编译就正常了。

## 简单实例讲解webpack打包原理 ##

我们一般在项目中打包，大致演示一下实现步骤和方法。

我们进入项目目录，然后用命令行执行如下：

1.初始化用命令行建立打包脚本，其中建立一个打包应用根目录如demo，如下

$ npm init

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 3][]

这样在当前目录下，生成一个打包配置文件package.json。

**安装插件webpack-cli**，在当前目录执行如下：

$  npm install webpack webpack-cli --save-dev

会看到packge.json文件，多了如下脚本：

![2020112418361747.png][]

**安装扩展插件，**比如我们打包css样式就需要安装扩展插件如：style-loader、css-loader。

$ npm install css-loader --save-dev

$ npm install style-loader --save-dev

打包配置文件package.json变化如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 4][]

**建立编辑资源文件** ，如下：

入口文件main.js，其中引入了样式文件style.css，模块文件test，以及其他脚本

require('./style.css');
    //require('!style-loader!css-loader!./style.css'); //旧方式
    // 引入test.js文件，并将其输出的内容（module.exports）赋值到test变量上
    var test = require('./test');
    console.log(test);
    // 在浏览器的console中输出test变量的内容
    console.log("aaaa")
    console.log("bbb")
    console.log("ccc")
    for(let i=0; i<10; i++) {
        console.log(i)
    }

style.css文件

body{background:red;}

首页文件output/index.html

<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <meta name="author" content="">
    
    <script type="text/javascript" src="app.js"></script>  
    </head>
    <body>
    this is index html my.
    </body>
    </html>

目录结构如下：

![20201124191746869.png][]

**建立编辑webpack配置文件webpack.config.js**，如下：

var webpack = require('webpack');
    module.exports = {
    	entry: [
    		"./main.js"
    	],
        module:{
    	  rules:[{
    		  test:/\.css$/,   
    		  use:["style-loader","css-loader"]
    	  }]
        },
    	output: {
    		path: __dirname +'/output',
    		filename: 'app.js'
    	}
    };

**最后， 我们打包编译一下**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 5][]

然后，我们运行一下结果文件output/index.html

![20201124192115403.png][]

## 定制化实例1  ##

下面实现定制化html的实例。

**建立模板页面**，首页src/index.html

<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="">
      <meta name="description" content="">
      <meta name="author" content="">
    
    </head>
    <body>
    this is index html my.
    </body>
    </html>

**安装配置插件html-webpack**，安装如下：

$ npm i --save-dev html-webpack-plugin@next

注意：这是当前最新webpack5.6版本的安装方法，5.0之前的版本安装命令是“npm install html-webpack-plugin”，如果使用错安装命令，后面执行可能会报错。最新版本简化了很多配置使用，还是推荐使用最新的。如报错“The 'compilation' argument must be an instance of Compilation ”

**编辑修改webpack配置文件webpack.config.js**，如下：

var webpack = require('webpack');
    const path = require('path');
    //导入在内存中生成html页面的插件,只要是插件，都要放到plugins节点中去
    const htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
    	...
    	plugins: [
            new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
                template : path.join(__dirname,'./src/index.html'), //指定模板页面，根据指定的路径生成内存中的页面
                filename : 'index.html' //指定内存中生成的页面的名称
            })
        ]
    };

**最后， 我们打包编译一下**

$ webpack

在生成目录output下，发现生成了index.html，我们看看生成的。

![20201124223525750.png][]

我们发现，红色标识，是打包后附加到模板文件，动态生成的。这样页面很简单，被压缩优化过了，性能也是被优化过的。所以我们只要把模板页面写好，其中需要优化或压缩的部分，或需要webpack编译部分让生成的app.js来完成，构建好这个模板页面，以及需要的资源文件，最后就是生成编译打包了，最后把这个output输出页面来作为最终的web页面来发布就可以了。

## 介绍一些webpack辅助工具插件 ##

webpack-dashboard插件调试界面工具，安装如下：

$ npm install webpack-dashboard -g

使用方法命令如下：

$ webpack-dashboard -- node main.js

其中main.js是前面指定的入口文件，可以根据实际替换，显示的调试界面如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 6][]

## 实际项目使用webpack打包的建议方法 ##

实际项目可能需要使用更多的webpack插件（网上资料很多，这里不做赘述），项目的模块和目录都各有不同。我们活学活用，可以把上面简化版的实例理解清楚，把各项目目录或模块都当作src目录，然后把配置文件webpack.config.js放在当前项目目录，并建立输出打包目录output，然后安装好webpack环境，使用webpack进行打包输出到output目录，最后把这个output目录作为发布目录，总体流程就是这样，掌握好大方向流程，细节上可以进一步填充即可。

**本文持续改进完善...**

[Webpack_ -]: https://www.jianshu.com/p/9f2d0b64f3b8
[Webpack_Webpack_a_Keri_-CSDN]: https://blog.csdn.net/a_keri/article/details/81019140
[Nodejs]: https://mp.csdn.net/postedit/90633166
[Nodejs_yan_dk_-CSDN]: https://blog.csdn.net/yan_dk/article/details/90633166
[Webpack _bilibili]: https://www.bilibili.com/video/av69121363/
[https_blog.csdn.net_baozhiqiangjava_article_details_80603509]: https://blog.csdn.net/baozhiqiangjava/article/details/80603509
[webpack_ -]: https://www.jianshu.com/p/b8d6ac3041e3
[webpack_ - 1]: https://zhuanlan.zhihu.com/p/93430753
[https_webpack.js.org_ _ _ _ _ _ https_webpack.js.org_loaders]: https://webpack.js.org/loaders/
[20200131231544286.png]: https://img-blog.csdnimg.cn/20200131231544286.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200131231641916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[20200131232617845.png]: https://img-blog.csdnimg.cn/20200131232617845.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200131233527286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200131235437319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8ad9f005bc6144b6af896d42fec335e6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/c819119944334ce59a326f9815c1cd70.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/903dfc880d0b49e0978ceb618f3c84fd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/544e5fb032734488ac23919875dd852b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/017ab1c3093f45ff89c771eb7f552221.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LqR54Sw_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ac0265f94da340f9a598e36ea7fa1899.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LqR54Sw,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201124183033631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[2020112418361747.png]: https://img-blog.csdnimg.cn/2020112418361747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201124190920979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[20201124191746869.png]: https://img-blog.csdnimg.cn/20201124191746869.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201124191933492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70
[20201124192115403.png]: https://img-blog.csdnimg.cn/20201124192115403.png
[20201124223525750.png]: https://img-blog.csdnimg.cn/20201124223525750.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020112500265712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbl9kaw==,size_16,color_FFFFFF,t_70