webpack的安装及使用

一、webpack介绍

“Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。要使用 Webpack 前须先安装 Node.js。”

如果没有安装node.js，可以前往官网下载安装，根据自己电脑的类型选择不同的版本下载。
在这里插入图片描述

二、安装

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack                //或cnpm install --save-dev webpack
npm install --save-dev webpack@<version>      //或cnpm install --save-dev webpack

出现如下图内容即代表安装成功，同时在项目中也会生成package.json文件。
在这里插入图片描述
但到这里还没有结束，因为官网中提示说如果安装的是webpack 4+版本的话，还需要安装webpack-cli（如同是一个建议的客户端）

所以，我们要继续来安装webpack-cli，在终端执行下面的指令即可：

npm install --save-dev webpack-cli   //或cnpm install --save-dev webpack-cli

执行后，会在终端显示如下内容：
在这里插入图片描述
同时在项目中也会生成node_modules目录，至此，webpack就安装完了。

三、使用

在我们使用之前，需要我们对webpack做一些简单的配置，首先在你的项目根目录新建一个webpack.config.js文件和两个目录，目录分别为src和dist（也可以是其他的，只是这两个名字方便理解），然后在webpack.config.js文件中输入如下内容：

var path = require('path');

module.exports = {
        entry: './src/index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
};

解释：

第一行的path是nodejs的内置模块，方便后面写dist的绝对路径。
entry表示入口，即要打包的文件的路径。
output表示出口，即打包后的文件的位置和文件名，filename表示文件名，path表示路径。

配置好以后我们要新建一个需要打包的js文件，根据上面路径，我们新建一个index.js文件（也可以叫别的名，但要和上面的entry统一，写入如下测试内容：

console.log('success');

下面级就可以进行打包了，在终端输入如下内容:

npx webpack

在终端打印出了如下内容
在这里插入图片描述
同时在dist目录中生成了一个bundle.js文件，到这里我们就已经打包成功了

但是有一处警告，警告的原因是我们没有配置mode属性，它的默认值是production，即代表生产模式，对于我们初学者来说，应该配置成development（开发模式）更佳，然后我们在webpack.config.js文件中增加如下内容：

mode: 'development',

就成了这样
在这里插入图片描述
为了验证打包后的文件可用性，我们在dist目录下新建html文件，并输入如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

最重要的就是<script src="bundle.js"></script>将打包后的bundle.js文件引入html，下面在浏览器查看html，打开控制台，若打印出success，则代表我们成功了！
在这里插入图片描述

来源：CSDN

作者：旁观者lgp

链接：https://blog.csdn.net/qq_45515863/article/details/103721889

标签

Webpack

bundle