webpack的安装及使用

你的名字 2023-06-25 06:25 90阅读 0赞

## 一、webpack介绍 ##

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

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

## 二、安装 ##

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

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

出现如下图内容即代表安装成功，同时在项目中也会生成`package.json`文件。  
![在这里插入图片描述][20191226201522137.png]  
但到这里还没有结束，因为官网中提示说如果安装的是webpack 4+版本的话，还需要安装webpack-cli（如同是一个建议的客户端）  
![在这里插入图片描述][20191226202343454.png]  
所以，我们要继续来安装webpack-cli，在终端执行下面的指令即可：

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

执行后，会在终端显示如下内容：  
![在这里插入图片描述][20191226202830731.png]  
同时在项目中也会生成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

在终端打印出了如下内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70 1]  
同时在dist目录中生成了一个bundle.js文件，到这里我们就已经打包成功了  
![在这里插入图片描述][20191226205250180.png]  
但是有一处警告，警告的原因是我们没有配置mode属性，它的默认值是**production**，即代表生产模式，对于我们初学者来说，应该配置成**development**（开发模式）更佳，然后我们在`webpack.config.js`文件中增加如下内容：

mode: 'development',

就成了这样  
![在这里插入图片描述][20191226210157719.png]  
为了验证打包后的文件可用性，我们在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**，则代表我们成功了！  
![在这里插入图片描述][20191226210737294.png]

[Link 1]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226201232677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz,size_16,color_FFFFFF,t_70
[20191226201522137.png]: https://img-blog.csdnimg.cn/20191226201522137.png
[20191226202343454.png]: https://img-blog.csdnimg.cn/20191226202343454.png
[20191226202830731.png]: https://img-blog.csdnimg.cn/20191226202830731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191226204952225.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NTE1ODYz,size_16,color_FFFFFF,t_70
[20191226205250180.png]: https://img-blog.csdnimg.cn/20191226205250180.png
[20191226210157719.png]: https://img-blog.csdnimg.cn/20191226210157719.png
[20191226210737294.png]: https://img-blog.csdnimg.cn/20191226210737294.png