Webpack最佳入门实践

最新推荐文章于 2023-04-08 12:30:00 发布

蚂蚁二娘

最新推荐文章于 2023-04-08 12:30:00 发布

阅读量352

点赞数 1

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/web2022050901/article/details/127210476

版权

一.洪水猛兽webpack？

从一个新手的角度去想象webpack* 我们知道的主流框架是vue，react，a…那啥* 好吧，现在一般都是vue和react* 所以，如果是前端三项之力的话，我们会说* Vue* React* Webpack
就是感觉webpack其实挺重要的* 就会给人一种很难很复杂的感觉，确实，webpack的功能的确很神奇* 但是webpack其实没有那么难* 我们通过简单的实践来告诉大家，不要惧怕webpack* Webpack so easy

言归正传:

作为一个javascript前端开发者，肯定都知道webpack这个东西，也知道各种各样的module。webpack作为一个打包工具，就是将各种各样的模块捆绑（打包）在一起。支持的module有：

CommonJS* AMD* CSS import* Images url* Es modulewebpack将所有模块捆绑在一起，使其运行。

二.重要概念

webpack其实就是控制五个模块，它们分别是

入口文件(entry point)

webpack工作开始的地方，就是一个js文件* 可以收集其他模块文件* 最后将所有模块文件打包到一起，形成一个可运行的代码* 入口文件默认是src/index.js### 输出文件(output)
outout就是webpack通过build过程打包后形成的文件。* 默认的输出文件夹为根目录下的dist/文件夹### 加载器(loaders)
loaders是一些第三方扩展包* 可以帮助webpack处理加载各种类型的文件。* 如处理css，image文件的loaders* vue，react的loaders* 如果没有loaders，webpack本身是不支持css文件，vue，react文件的

插件(plugins)

plugins也是第三方插件，它可以改变webpack的工作方式* 例如有些插件可以设置webpack的环境变量

模式(mode)

webpack有两种工作方式* development(开发模式)* production(生产模式)
主要的区别就是在production模式下* 产生的捆绑包文件更小，去掉了在运行下无关的注释，空格等等* 这样可以加快用户加载代码的速度

所以，这里有一个小问题，就是loaders和plugins有区别吗?* 在我看来，loaders是编译时候用一下，plugins则是可以一直使用，我觉得大概是这样吧
看到这里，大家也了解到了为什么webpack的地位如此之高！* 可以统一不同的代码并打包* 而且过程中可以把不必要的代码干掉

webpack实践

初始化项目

首先新建一个目录npm init -y* 你就是看见创建了一个package.json包
添加一条start脚本```
“scripts”: {“test”: “echo “Error: no test specified” && exit 1”,“start”:“webpack”},


* 安装相应的依赖* `webpack webpack-cli webpack-dev-serve`三个依赖* `yarn add webpack webpack-cli webpack-dev-serve`
* 然后就可以运行刚才编写的`start`命令了* `yarn start`
* 和你想的一样，啥也没有打包会报错的* src/index.js创建一个index.js文件* 内容就`console.log("hello webpack!");`吧
* 再次运行`yarn start`会有一个`warning`* `webpack`正常运行并生成了一个`dist`文件夹* `dist`就是`webpack`的输出文件* 但是有`warning`，是因为没有指定模式* 模式默认是`production`模式* 所以我们在命令中指定模式

“start”: “webpack --mode development”


webpack配置文件，指定输入输出
------------------

前面提到，我们可以更改webpack的配置的。为了配置webpack，我们需要一个`webpack.config.js`文件。

* 首先更改入口文件和出口文件:* ```// webpack.config.jsconst path = require("path");module.exports = {// 将入口文件指定为main.jsentry: {index: path.resolve(__dirname, "src", "main.js")},// 将输出文件目录改为build/output: {path: path.resolve(__dirname, "build")}}; ```* entry字段可以用来修改入口文件，上面的代码将webpack入口文件改为`src/main.js`。* output字段用于修改输出文件位置，我们将输出文件目录改为`build/`。* 将src目录下的`index.js`文件重命名为`main.js`，运行start命令，可以看到webpack输出目录build。

添加html页面
--------

为了将webpack打包后的文件，用script标签嵌入到html文档中，我们需要借助第三方plugins扩展`html-webpack-plugin`

* 上面介绍过plugin，是改变webpack工作方式的第三方扩展* html-webpack-plugin的作用就是改变webpack的工作方式* 使webpack打包后的js文件，添加到html页面的script标签中，这样打开html就可以运行我们的js脚本了* * *

* 1.首先安装插件

yarn add html-webpack-plugin --dev


* 2.然后在`config文件`中使用插件

// webpack.config.js
const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
module.exports = {// 将入口文件指定为main.jsentry: { index: path.resolve(__dirname, “src”, “main.js”) },// 将输出文件目录改为build/output: {path: path.resolve(__dirname, “build”),},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, “public”, “index.html”),}),],
};


* 上面的代码指示webpack加载`public/index.html`，所以创建public目录，并添加`index.html`文件，内容如下:

Document

hello webpack!

```

看一下打包后的html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script defer src="index.js"></script>
</head>
<body><div>hello webpack!</div>
</body>
</html>

我们可以看到打包后的js文件已经通过script标签加到了html中

通过webpack启动本地服务

作为开发者，肯定会用到本地服务，webpack提供了development server，可以很方便的启动一个本地服务，方便开发者进行开发工作

1.首先我们需要安装webpack-dev-server包

yarn add webpack-dev-server --dev

2.我们更改package.json中的命令如下:

 "scripts": {"test": "echo "Error: no test specified" && exit 1","buildDev": "webpack --mode development","start":"webpack serve --mode development"},

打包命令为buildDev* 本地运行为start* 执行yarn start，会在本地8080端口启动一个本地服务。* 打开可以显示index.html页面

我们再来说说loader

在前面我们提到了plugin的实践* 那和它有些相似的loader如何使用呢？
以css文件为例* 1.我们先安装样式的loader* npm install css-loader style-loader --save-dev * 然后配置loader即可* module: {rules: [{test: /.css$/,use: ["style-loader", "css-loader"],},],}, * 是不是也很简单* 这样配置后，写的css文件也可以被编译打包了* 那么，我们就对webpack的模块都有了一个简单的实践了