webpack note2（手动打包&简便打包&配置走个流程）

﹏ヽ暗。殇╰゛Y 2022-11-26 15:54 27阅读 0赞

# webpack手动命令打包 #

1、创建一个js文件，ES6模块化导出。  
demo1.js：  
![在这里插入图片描述][20200812144211567.png_pic_center]  
2、再创建一个js文件，解构出上面文件导出的内容。  
demo2.js：  
![在这里插入图片描述][20200812144234396.png_pic_center]  
3、如果现在我把demo2.js直接引入到html文件里面，情况是报错。为什么，因为是ES6语法，浏览器不能直接识别。那该怎么办呢，可以用webpack工具来配置。

4、我是全局安装webpack：`npm install -g webpack-cli webpack`，然后通过命令`webpack --mode development 要打包的文件 -o 输出文件名`指定输出模式为开发模式，将demo2.js文件用webpack来打包，输出到新的文件命名为outdemo2.js，然后引入html文件里。

![在这里插入图片描述][20200812151934704.png_pic_center]  
![在这里插入图片描述][20200812151944816.png_pic_center]  
5、然后就能在浏览器里查看执行结果了。

![在这里插入图片描述][20200812152752608.png_pic_center]  
6、注意：如果在打包的时候没有指定mode，其实会有一串警告，而且在编译时会默认把代码压缩，因为默认是 production生产模式。  
![在这里插入图片描述][20200812160846898.png_pic_center]  
警告说你现在有两种模式，一种叫做production （默认生产环境），还有一种叫development （开发环境），而你没有指定任何一个。

mode是webpack4新增的一个选项，必须在生产环境production （自动压缩你的代码）和开发环境development （开发模式不会压缩你的代码）之中选择一个，不然就有警告。

# webpack简便方式打包 #

上面的打包方法麻不麻烦，如果要自动打包要怎么办。看下面。

有个简便方式，不过对文件夹和文件有所要求，入口起点`必须`使用默认的`./src`和`index.js`。然后控制台 `webpack --mode production` 即可打包，且自动把打包好的文件默认生成到`./dist`文件夹下的`main.js`中。

![在这里插入图片描述][20200812164445609.png_pic_center]

# webpack配置流程 #

Webpack的配置文件叫 `webpack.config.js`，配置完成后，可以直接在控制台输入`webpack` 进行打包。

### （一）配置文件入口、出口、打包模式 ###

###### 1、配置单个文件 ######

与简便方式打包不同，在配置文件里，这个入口出口地址可以自定义。

module.exports={ 
    	entry:"./src/index.js",//入口
    	output:{  //出口
    		path:__dirname+"/dist",//文件夹
    		filename:"outindex.js"//生成的文件名
    	}
    }

把上面demo1.js后台demo2.js移入到./src下，然后重命名demo2.js为index.js。

![在这里插入图片描述][20200812165806694.png_pic_center]

结合上面的配置文件，在cmd中运行`webpack` 查看结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]  
打包成功了，引入html文件里面也能运行，但我忘记指定模式了。

###### 2、配置打包模式 ######

webpack提供了production、development 两种打包模式。但 如果在每次打包的时候都要指定打包模式，很麻烦。其实可以在配置文件里面配置好打包模式。

只要在与entry、output同级处配置mode即可。

mode:"development"//开发模式指定为开发模式

###### 3、配置多个文件 ######

module.exports = { 
        // 将entry 设置成为一个对象，以键值对的形式设置多个入口起点
        entry: { 
            index: "./src/index.js",
            indexa: "./src/indexa.js"
        },
        output: { 
            path: __dirname + "/dist",
            filename: "out[name].js"//[name] 代表的就是入口文件的key
        },
        mode: "development"
    }

在.html中引入一下刚生成的文件：

![在这里插入图片描述][20200812173159399.png_pic_center]  
然后能得到结果：  
![在这里插入图片描述][20200812172939485.png_pic_center]

总之一句话，单入口—单出口；多入口—多出口。

### （二）plugin插件 ###

plugin，用于扩展webpack的功能。各种各样的plugin几乎可以让webpack做任何与构建相关的事情。

plugin的配置很简单，`plugins`配置项接收一个`数组`，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

下面介绍两个常用的插件：clean-webpack-plugin、html-webpack-plugin。

###### 1、clean-webpack-plugin ######

该插件可以实现在打包时，**清空原有的内容**。

使用的场景是：打包时若修改入口起点的键名，会发现打包之后，之前的打包的文件也在。比如我将上面文件入口的两个文件改一下名字，改成indexx和indexxaa，我们看一下啥情况：发现之前的文件也还在，但我只想要最新生成的文件，岂不是还要手动删除！  
![在这里插入图片描述][20200812174608340.png_pic_center]  
其实是有解决办法的。如果想在打包的之后清空之前的内容，可以使用`clean-webpack-plugin`这个插件。

（1）下载

cnpm install clean-webpack-plugin -D
    /*
    这里注意一个事儿：
    与项目无关的插件用 -D（--save--dev）添加到 package.json的 devDependencies ；
    有依赖关系的用-S（--save） 添加到 dependencies
    */

（2）引入

const  { CleanWebpackPlugin}  = require("clean-webpack-plugin");

（3）使用

//plugins是一个数组 数组的每一项就是你使用的插件
    plugins: [
        new CleanWebpackPlugin()
    ]

（4）测试一下  
我再次修改两个入口文件的键名key为indexxxxx、indexxaaxxxx，然后webpack运行一下。

![在这里插入图片描述][20200812183128556.png_pic_center]

###### 1、html-webpack-plugin ######

该插件的主要作用：自动添加打包成功的内容到指定.html中。

（1）下载

由于 html-webpack-plugin:插件需要依赖 webpack webpack-cli，所以得把这两个依赖也下载。
      cnpm install webpack webpack-cli -D
      cnpm install html-webpack-plugin -D
    
      或者直接一句话：
      cnpm install --save--dev webpack webpack-cli html-webpack-plugin
      
    （注意：即便是全局安装了webpack webpack-cli，在该项目中还是再次要安装到devDependencies中）

（2）引用

const HtmlWebpackPlugin = require("html-webpack-plugin");

（3）使用

plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ 
            template: "./index.html",  // 指定模板地址，即要将内容注入的目标文件
            hash: true,   //为引入的地址增加后缀，用于清除缓存
            filename: "home.html",   // 将打包后新生成的.html文件名重置，默认是index.html
            title: "我在学习webpack",  //向编译好的页面中添加浏览器标题内容
    		minify:{ 
    		    removeComments:true,  //去除注释
    		    // collapseWhitespace:true //压缩代码
    		}
        })
    ]

（4）测试一下

写好模板.html文件，把title引入进来：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]  
打包后，新生成home.html文件，看目录：

![在这里插入图片描述][20200812184020200.png_pic_center]  
然后看看我们将打包的资源引入模板html后新生成的home.html的内容：（原模板文件是没有变化的）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]

（5）相关配置介绍：

**设置页面标签**：如果在配置中设置了title，那么必须在对应的 template 模版文件中添加，才能让title生效：  
`<title><%= htmlWebpackPlugin.options.title%></title>`

**取消注释**：如果template模版中有注释，那么打包的内容也会有注释 。在生产环境中不需要注释，那么就可以设置`minify`来配置。

关于更多插件的内容，若有兴趣研究请看[官网plugin：https://www.webpackjs.com/plugins/][plugin_https_www.webpackjs.com_plugins]

### （三）webpack-dev-server ###

搭建一个开发中的服务器。（不是插件）

**安装**：`npm install -g webpack-dev-server` 。

**运行命令**：`webpack-dev-server`，然后在浏览器运行：localhost:8080 ，就能看见模版的内容。

**注意**：在webpack配置文件中添加devServer相关配置，会发现dist这个文件夹里面的资源不再生成；而且如果先把dist文件删除，再启动服务，会发现不会再生成dist文件夹了 。为什么会这样？因为这个开发中的服务器把生成的内容保存在缓存中了。

**配置1**：在webpack.config.js中配置

devServer:{ 
    	open:true,//在浏览器中自动打开
    	port:"8081",//设置端口
    	host:"127.0.0.1"//访问地址
    }

**配置2**：在package.json中配置

如果觉得 webpack-dev-server 麻烦的话，可以在package.json中配置，然后`npm run start`启动  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]  
然后还得注意一个问题，有的时候使用webpack-dev-server来执行的时候，打开的页面并不是我们想要的home.html而是一个目录的形式，因为我们使用的是最新版本的，它会自动去寻找一个叫index.html的文件自动打开。但我们刚刚使用HtmlWebpackPlugin这个插件把主页面名改成了home.html，所以webpack-dev-server这个服务找不到了，那么接下来我们把主文件名改回默认的index.html，然后用服务打开，就可以啦。  
![在这里插入图片描述][20200814090715442.png_pic_center]

可以参考下官网：[开发中 Server(devServer)][Server_devServer]

### （四）Loaders加载器/打包器 ###

加载器/打包器/翻译器，可以将不同的文件类型（如typescript，css、scss、图片以及对老版本/新版本的JavaScript）转成浏览器能够识别的内容，方便我们使用。

> loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

下面主要介绍三大种常见的loader。

#### 1、style-loader与css-loader ####

webpack可以把以指定入口的一系列相互依赖的模块打包成一个文件，这里的模块指的不只是js，也可以是css。

style-loader用来引入css，css-loader用来动态创建style标签，塞到head标签里。所以，要一起下载这辆个依赖。

**安装**：`npm install style-loader css-loader -D`

**使用**：

新建一个`assets`的静态资源文件夹 → 创建一个`style.css`文件用来编写样式

在js入口文件引用样式：我们在index.js中引入吧

import "../assets/style.css"

在webpack.config.js中配置：

module: { 
        rules: [
            { 
                test: /\.css$/,  //正则匹配css文件 
                loader: ["style-loader", "css-loader"] //引用顺序不能变，先加载css，再插入到style中
            }
        ]
    }

在模板html中写入一个h1标签，打包后，打开最终的home.html文件：OK渲染成功。

![在这里插入图片描述][2020081220144473.png_pic_center]

#### 2、Less-loader/sass-loader ####

###### （1）Less ######

需要安装相关依赖：`cnpm install less-loader less -D`

在`assets`文件夹中创建`less`文件，并且在`入口js`引用：

@yellow:yellow;
    body{ 
    	background-color: @yellow;
    }

import "../assets/style.less"

在webpack.config.js中配置less：

module:{ 
    	rules:[
    		{ 
    			test: /\.less$/,		
    			loader:["style-loader","css-loader","less-loader"] // 引用顺序不能变
    		}
    	]
    }

###### （2）Sass ######

**安装依赖**：`cnpm install sass-loader node-sass -D`

在`assets`文件夹中创建`style.scss`文件，并且在`入口js`引用：

$yellow:yellow; body{ 
    	background-color: $yellow;
    }

import "../assets/style.scss"

在webpack.config.js中配置sass，在rules中添加：

{ 
    	test: /.\.scss$/,
    	loader:["style-loader","css-loader","sass-loader"] // 引用顺序不能变
    }

#### 3、babel-loader（非常重要） ####

ES6 语法在开发中已经非常普及，甚至也有许多开发人员用上了 ES7 或 ES8 语法。然而，浏览器对这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babel 应运而生。

**babel-loader**：就是把es6 es7等这些语法转换成普通浏览器可以识别的javascript代码。

**下载**：官方提供了两种一个版本是8 版本7 ，我们使用最新的8  
`npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]  
**使用**：

在webpack.config.js中添加

module: { 
      rules: [
        { 
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/, //设置哪些文件不处理
          //use设置需要什么loader
          use: {  
            loader: 'babel-loader',
            options: { 
              presets: ['@babel/preset-env'] // 转换规则
            }
          }
        }
      ]
    }

官方babel-loader：[https://www.webpackjs.com/loaders/babel-loader/][https_www.webpackjs.com_loaders_babel-loader]

可以自己尝试编写一个es6的内容，打包，用低版本ie测试是否可以正常运行。

#### 4、Vue Loader ####

注意：Vue Loader 是一个Webpack的 loader，它支持`.vue`单文件组件的各个`<template>`、`<script>` 和 `<style>`打包成浏览器可以识别的内容。

官网Loader：[https://www.webpackjs.com/loaders][https_www.webpackjs.com_loaders]

# 拓展—Webpack常见概念 #

###### 1、webpack的基本能力：处理依赖、模块化、打包 ######

1.  依赖管理：方便引用第三方模块，让模块更容易复用，避免全局注入导致的冲突，避免重复加载或者加载不必要的模块。
2.  合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，可以减少、优化代码的体积。
3.  各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误。

###### 2、Webpack打包原理 ######

**webpack是把项目当作一个整体**，通过给定的一个主文件，从这个主文件开始找到你项目当中的所有依赖的文件，使用loaders来处理它们，最后打包成一个或多个浏览器可识别的js文件。

###### 3、webpack工作过程 ######

1、解析配置参数，合并从(npm install 类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息；  
2、注册配置中的插件，做出对应的反应；  
3、解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去；  
4、在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换；  
5、递归结束后得到每个文件最终的结果，根据output配置生成代码；

--------------------

# 总结 #

介绍了webpack手动的、自动的打包方法，然后在配置文件中实现自动化。其中注意四个核心概念 entry、output、loader、plugin，在使用的时候记得看官方文档。

参考博客：  
[webpack：https://www.jianshu.com/p/105123c1afbd][webpack_https_www.jianshu.com_p_105123c1afbd]  
[webpack-基础：https://www.jianshu.com/p/7b269991d07e][webpack-_https_www.jianshu.com_p_7b269991d07e]

# 我的第一个webpack配置 #

const {  CleanWebpackPlugin } = require("clean-webpack-plugin");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = { 
        entry: { 
            index: "./src/index.js",
            indexa: "./src/indexa.js"
        },
        output: { 
            path: __dirname + "/dist",
            filename: "out[name].js"
        },
        mode: "development",
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({ 
                template: "./index.html",
                hash: true,
                filename: "home.html",
                title: "我在学习webpack",
                minify: { 
                    removeComments: true,  //去除注释
                    // collapseWhitespace:true //压缩代码
                }
            })
        ],
        // devServer:{ 
        // open:true,//在浏览器中自动打开
        // },
        module: { 
            rules: [
                { 
                    test: /\.css$/,//正则匹配css文件
                    loader: ["style-loader", "css-loader"]
                }
            ]
        }
    }

[20200812144211567.png_pic_center]: /images/20221124/9a43c98fc7f041178f17468f6867f46f.png
[20200812144234396.png_pic_center]: /images/20221124/77e56c1b7f374c66a1150e3b6fc6dd5d.png
[20200812151934704.png_pic_center]: /images/20221124/d83e6493ba47476199f81ff7ba91fca9.png
[20200812151944816.png_pic_center]: /images/20221124/917b1d8702aa4c0fb479356b989b787b.png
[20200812152752608.png_pic_center]: /images/20221124/bfcce8502a0444b38dd03a664bbb32fc.png
[20200812160846898.png_pic_center]: /images/20221124/714ac22fdf0e4eeb88b3804a6d94b753.png
[20200812164445609.png_pic_center]: /images/20221124/ffe600abd6ab4e66a36d6088025e104a.png
[20200812165806694.png_pic_center]: /images/20221124/c0970dc429d84bdcba91c7e3cba99ade.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/9ae7f3c23e6f440297b2dfc34d2b9b25.png
[20200812173159399.png_pic_center]: /images/20221124/d98e5ec4f5ae4ec6a24bec1a5a8bad15.png
[20200812172939485.png_pic_center]: /images/20221124/09368602614c4234964ed4d9aea6486d.png
[20200812174608340.png_pic_center]: /images/20221124/7e565aefb830478080147adfdb555182.png
[20200812183128556.png_pic_center]: /images/20221124/fd33cb2d9c2045578918419e58acd1ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/59d56b1f28e74a89a8eaeb50ad8e6e6a.png
[20200812184020200.png_pic_center]: /images/20221124/ab5df59c84e545f3b499bd14f521ba92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/ae389e93fac84995be208a7e23091045.png
[plugin_https_www.webpackjs.com_plugins]: https://www.webpackjs.com/plugins/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/8b915e1405b94cb88b197339ed9f34f4.png
[20200814090715442.png_pic_center]: /images/20221124/d54dd57fd9314a0387093589550603e9.png
[Server_devServer]: https://www.webpackjs.com/configuration/dev-server/
[2020081220144473.png_pic_center]: /images/20221124/7eefe5f5740b4a32b16c22b36a77e99f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/74153aa9c0ea4a6781288c04aee33efb.png
[https_www.webpackjs.com_loaders_babel-loader]: https://www.webpackjs.com/loaders/babel-loader/
[https_www.webpackjs.com_loaders]: https://www.webpackjs.com/loaders
[webpack_https_www.jianshu.com_p_105123c1afbd]: https://www.jianshu.com/p/105123c1afbd
[webpack-_https_www.jianshu.com_p_7b269991d07e]: https://www.jianshu.com/p/7b269991d07e