Webpack入门

最新推荐文章于 2022-11-08 23:22:35 发布
最新推荐文章于 2022-11-08 23:22:35 发布
阅读量223 收藏 1
点赞数
文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44756582/article/details/106683219
版权

webpack

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。

Webpack可以从终端、或是更改 webpack.config.js 来设置各项功能。

要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用加载器来将资源转化成模块。开发者可以自定义加载器的顺序、格式来因应项目的需求。

webpack的安装及简单使用

安装nodejs

百度搜索nodejs
在这里插入图片描述
由于网速原因，我们可以直接通过nodejs中文网来进行安装。
在这里插入图片描述
在这里插入图片描述
选择对应的安装包，下载后进行安装就可以了。

检验nodejs安装是否成功

打开命令行，输入

node -v

和

npm -v

结果如下：
在这里插入图片描述
这里将显示你当前的nodejs版本和npm版本，安装成功！

安装webpack

之前我们安装nodejs的同时，也会同时安装了一个npm工具，这是nodejs的一个包管理工具，我们可以通过它来安装webpack。
全局安装：打开命令行终端，输入(这里安装webpack3.6.0版本)：

npm install webpack@3.6.0 -g

安装完成后，在命令行输入：

webpack --version

注意这里是两个-。
运行结果：
在这里插入图片描述
证明安装成功！

webpack的简单使用

首先，我们新建一个项目，在项目下创建两个文件夹以及index.html
在这里插入图片描述
其中，src是我们放代码的地方，dist是我们用webpack进行打包后生成文件的地方。
我们在src中创建两个文件：
在这里插入图片描述
main.js:

/*
 * @Author: wangyuyong
 * @Date: 2020-06-10 14:23:06
 * @LastEditTime: 2020-06-10 14:28:26
 * @FilePath: /webpackstudy/01-webpack的起步/src/main.js
 * @Description:
 */
import { sum, sub } from "./mathUtils.js";

let a = 10;
let b = 2;
console.log(sum(a, b));
console.log(sub(a, b));

mathUtils.js

/*
 * @Author: wangyuyong
 * @Date: 2020-06-10 14:26:25
 * @LastEditTime: 2020-06-10 14:27:28
 * @FilePath: /webpackstudy/01-webpack的起步/src/mathUtils.js
 * @Description:
 */

function sum(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

export { sum, sub };

这里我们用了模块化开发的方式。

我们先来看看如果不用webpack，我们要怎么引用这些js文件。

index.html

<!--
 * @Author: wangyuyong
 * @Date: 2020-06-10 14:22:56
 * @LastEditTime: 2020-06-11 11:01:35
 * @FilePath: /webpackstudy/01-webpack的起步/index.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./src/mathUtils.js" type="module"></script>
  <script src="./src/main.js" type="module"></script>
</html>

我们需要同时中index.html引用mathUtils.js文件和main.js文件
运行结果：
在这里插入图片描述
在这里，我们不仅要依赖多个js文件，同时还要处理好js文件之间的依赖。
如果使用webpack:
首先，我们在命令行中进入当前项目目录：
在这里插入图片描述
然后输入：

webpack ./src/main.js ./dist/bundle.js

在这里插入图片描述
在这里插入图片描述
我们在index文件中删除原来的js文件的引用，改为：

<script src="./dist/bundle.js"></script>

运行结果：
在这里插入图片描述
webpack可以帮我们自动处理模块之间的依赖关系，我们只需要引用打包后的文件就可以了。

webpack的基本配置

如果我们并不想每一次打包的时候，都需要输入要打包文件的路径，以及输出文件的路径，我们可以通过对webpack进行一定的配置来实现
在这里插入图片描述
创建webpack.config.js文件，输入：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
};

entry是要打包文件的路径，这里我们要打包main.js（webpack在打包时，会自动帮我们处理模块的依赖关系，main.js依赖了mathUtils.js文件，webpack会自动帮我们处理）。
output是要输出的路径，这里必须是一个绝对的路径，因为这个配置我们希望可以抽取出来，在每个项目都可以使用这个配置，因此这个绝对路径我们通过nodejs来动态获得，而不是直接写死。
因为使用了nodejs，所以我们还需要对项目进行初始化，在终端输入：

npm init

输入相关配置信息就可以了（可以一路回车，在输入package name时，因为要求必须是英文，如果默认有中文可能会报错，可以取一个英文名就行了）。
初始化完毕后：
在这里插入图片描述
项目多出来了一个package.json文件

现在我们删除bundle.js重新打包一次
在这里插入图片描述
在命令行输入webpack
在这里插入图片描述
在这里插入图片描述
重新生成了bundle文件。
测试运行结果：
在这里插入图片描述
与之前的运行结果相同

npm run build的使用

npm run可以执行一段脚本，打开package.json文件：
在这里插入图片描述
我们尝试运行一下这段test脚本：

npm run test

在这里插入图片描述
现在我们给它在加一段脚本：
在这里插入图片描述
然后删除bundle.js文件，我们尝试使用npm run build进行重新打包

npm run build

在这里插入图片描述
依旧能够正确打包。
通过npm run build来执行webpack，它会优先选择项目里的webpack，如果项目中没有webpack，再去找全局的webpack

在项目中安装webpack

之前在全局安装webpack，是通过

npm install webpack@3.6.0 -g

我们将-g删掉便可将webpack安装到当前目录
在这里插入图片描述
安装完成

webpack使用css文件配置

我们创建一个css文件夹，同时创建一个css文件
在这里插入图片描述
写入一下代码：

* {
  margin: 0px;
  padding: 0px;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

如果不使用webpack，我们可以直接在index.html文件中引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="src/css/index.css" />
  </head>
  <body></body>
  <script src="./dist/bundle.js"></script>
</html>

我希望通过webpack进行打包，在main.js中添加：

require("./css/index.css");

尝试使用npm run build进行打包
在这里插入图片描述
输出错误信息，这里提示我们需要一个合适的loader，查阅webpack官方文档，可以知道我们需要安装两个loader

  • style-loader
  • css-loader
    css-loader和style-loader一般一起使用

style-loader

安装

npm install style-loader --save-dev

使用

在webpack.config.js中进行一下配置

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }

完整配置如下：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
    ],
  },
};

css-loader

安装

npm install --save-dev css-loader

用法

用上面那个style-loader的配置即可（因为css和style一般一起使用）

重新打包

使用npm run build进行重新的打包
在这里插入图片描述
成功打包后，index.html不再需要引用css文件，而是引用打包后的bundle.js文件即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script src="./dist/bundle.js"></script>
</html>

运行结果：
在这里插入图片描述

webpack处理图片

我们创建一个文件夹img，并放入两张图片
在这里插入图片描述
修改index.css文件，引入其中一张图片作为背景
在这里插入图片描述
现在我们尝试打包

npm run build

在这里插入图片描述
和之前一样，依旧缺少一个loader

url-loader

安装

npm install --save-dev url-loader

用法

webpack.config.js中的配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

limit的作用是：当图片的大小小于limt指定的大小，则将图片转为base64，如果大于limit，则将图片打包。
webpack.config.js中的完整配置

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

file-loader

配置完url-loader，我们继续尝试打包

npm run build

在这里插入图片描述
报错信息提示我们不能找到file-provider

安装

npm install --save-dev file-loader

用法

直接安装即可！
完整配置：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

我们再一次尝试打包：
在这里插入图片描述
打包成功！
在这里插入图片描述
dist中多了一张图片
运行结果：

在这里插入图片描述
这里显示找不到图片，因为我们这里的图片路径是dist/下，而这里的url图片路径并不是在这里。
我们可以通过publicPath:"dist/"为其加上该路径，完整配置如下：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

重新打包即可
运行结果：
在这里插入图片描述

给打包的文件规范化命名

很多时候，我们对文件的命名都有一定的要求，而不是一长串的hash值
在这里插入图片描述
下面我们通过配置来规范化命名
在这里插入图片描述
我们可以通过在options中添加name属性来修改生成的图片的名字以及目录：
在这里插入图片描述
这样子生成的图片，会在dist/img/文件夹下，并且名称格式是：
[原文件名称].[八位hash值].[原扩展名]
重新打包文件
在这里插入图片描述

使用npm安装vue

npm install --save vue

我们测试一下是否能够正确使用vue
main.js:

import { sum, sub } from "./mathUtils.js";

let a = 10;
let b = 2;
console.log(sum(a, b));
console.log(sub(a, b));

require("./css/index.css");

import Vue from "vue";
new Vue({
  el: "#app",
  data: {
    message: "hello webpack",
  },
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
    </div>
  </body>
  <script src="./dist/bundle.js"></script>
</html>

我们在原来的基础上添加了vue的使用，同时还需要在webpack.config.js中添加一个配置，否则会报错：
在这里插入图片描述
完整配置如下：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "dist/",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

使用webpack配置vue

vue-loader vue-template-compiler

安装

npm install vue-loader vue-template-compiler --save-dev

配置

原webpack.config.js添加这三处代码
在这里插入图片描述
完整配置

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "dist/",
  },
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "img/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

搭建本地服务器

安装webpack-dev-server

npm install webpack-dev-server@2.9.3 --save-dev

配置

module.exports = {
	devServer:{
		contentBase:'./dist',
		inline:true
	}
}

使用

在终端输入：

webpack-dev-server
U_yong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack安装与配置
越陌度阡
12-29 1162
Webpack默认的配置文件为webpack.config.js，当然也可以通过webpack --config命令来指定配置文件。webpack配置组成主要由打包的入口文件、打包的输出、打包的环境、Loader配置、插件配置这几部分组成。
webpack安装步骤（一）
weixin_46022934的博客
02-17 904
一、Webpack是什么？ Webpack官网解释 解释内容如下图 二、Webpack的安装步骤 第一步：检查本机是否已经安装过Webpack（全局） 1.操作如下 2.结果如下图 第二步：安装webpack（非全局） 1.创建一个文件（vscode或者终端打开） 2.执行项目初始化命令（不明白可以点🔗） 执行命令如下（下面🔗有解释） 具体如下图 3.执行安装webpack命令 命令如下 成功如下图 总结（必看必看⚠️⚠️）
webpack学习笔记（一）安装webpack
Paranoia_yy的博客
09-26 719
当在控制台输入webpack的时候其实运行的是 node_modules\node_modules\webpack\bin\webpack.js这个文件，他会根据是否安装有webpack-cli或者是webpack-command进行处理，当没有安装其中之一就会告诉你需要下载webpack-cli,如果只有安装webpack-cli就会利用require.resolve获取webpack-cli/package.json的路径，然后根据这个路径加载模块。在当前路径中安装webpack不能使用。
Webpack安装
汉堡请不要欺负面条
09-19 1443
一.安装 1.安装node.js 怎么安装可以查看：NodeJS、NPM安装配置步骤(windows版本) 注意：node.js必须是最新版本。使用 Node.js 最新的 LTS 版本，是理想的启动入口。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或缺少相关 package 包。
webpack的基本使用过程以及命令
骨子里的偏爱
05-29 1788
一、webpack的基本使用过程 1.安装webpack npm install webpack@3.6.0 -g 2.查看是否安装完成，检测版本 webpack -v 3.打包的过程 (两个路径中间有空格) webpack ./src/main.js ./dist/bundle.js 4.如果因为webpack的版本过高，可以使用如下的方式 webpack ./src/main.js -o ./dist/bundle.js 5.如果是webpack5的版本的使用如下的方式 (设置为生产模式下) w
webpack入门教程
11-10
### webpack入门教程 #### 一、什么是webpack？ webpack 是现代 JavaScript 应用程序的一个模块打包器。它将多个模块和资源文件打包成一个或多个 bundle 文件，这些文件可以在浏览器环境中运行。通过 webpack，...
webpack入门+react环境配置
12-10
《webpack入门+React环境配置详解》 在前端开发中，模块化管理和自动化打包工具的使用已经成为常态，而webpack正是这样一款强大的工具。本文旨在为React的开发环境搭建打下基础，帮助开发者理解webpack的基本概念和...
WebpackGuide:公司团队内部分享的Webpack入门教学
05-08
在《Webpack入门》的分享中，我们首先会介绍Webpack的基本概念，包括其核心概念：入口（Entry）、输出（Output）、加载器（Loader）和插件（Plugin）。入口定义了应用的起点，输出则指定了Webpack打包后的文件位置。...
webpack的介绍与使用
jwz934738949的博客
07-19 158
webpack介绍 webpack是将javascript文件的静态模块打包工具。使用webpack可以让我们进行模块化开发 webpack可以打包javascript文件、css文件、图片、json文件等 webpack的安装 使用webpack必须安装node环境，前往node.js官网（https://nodejs.org/en/），下载LST版本; 下载webpack 3.6.0版本。进入cmd命令行模式，输入命令npm install webpack@3.6.0 -g; 安装完毕后输入命令：
webpack局部安装、配置与使用时的报错记录与解决方案
weixin_67665876的博客
11-08 2629
新手webpack配置时，容易遇到的Bug合集。
webpack安装
qq_52476758的博客
01-19 654
webpack安装 1. 查看自己的node版本 node -v 2. 全局安装webpack 这里先安装指定版本号3.6.0，因为vue cli2依赖该版本 先使用 webpack --version查看是否已经安装，没有安装执行下列命令，-g是指全局安装 npm install webpack@3.6.0 -g ...
webpack 安装与测试demo
lingling_df的博客
02-28 993
http://www.w2bc.com/Article/50764 这是我参考的文章
webpack 安装 及 查看版本号
zhaou_csdn的博客
05-26 2522
安装完node（自行找node安装教程）之后 执行以下命令： npm i webpack -g npm i webpack-cli -g 查看是否安装成功 或查看原来安装的webpack版本号，执行以下命令： npx webpack -v j局部安装 直接webpack -v 会报错 ，所以建议直接用以上命令执行 ...
webpack实例教程(一) 安装和查看
youyouyouyou44的博客
01-22 2162
webpack是一个很实用的打包工具，为了能够更透彻的掌握，我决定自己多写一些，作为笔记，当然要是能帮助大家就更好啦！ webpack可以将所有的文件，包括js,css,image等打包成一个js文件，减少请求，提高效率，而且还可以利用浏览器的缓存功能，更快的展示界面。是比gulp和grount更好用的包管理工具，所以接下来就要好好学一下这个工具了。 1、...
webpack安装和使用
Macuroon的博客
05-14 2668
        webpack是一个灰常灰常好用的打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，在前面学习很火的框架Vue的时候就用到了webpack，但是当时没有深入的了解它，虽然做了一些小测试成功了。。。。今天就来说说webpack吧！    1：安装webpack        * 首先吧，先安装Node，当然要去官网下载然后安装，毕竟人家是个很高大上的东西...
Webpack安装教程
@不喝海之言@
03-08 3496
Webpack安装教程 简单了解 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 Webpack就是可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（less，Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 使用webpack可以让前端开发变...
webpack 入门
最新发布
08-21
如果想快速入门Webpack，你可以按照以下步骤进行操作： 1. 安装Webpack和webpack命令行工具。 2. 在项目根目录下创建一个webpack.config.js文件，并配置Webpack的入口和出口文件以及其他需要的选项。 3. 在package....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值