webpack的介绍、安装、使用、配置

已于 2022-02-15 09:36:25 修改
阅读量230 收藏 2
点赞数
分类专栏： VUE 文章标签： webpack 前端 node.js
于 2022-02-14 17:40:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122923787
版权

webpack的介绍、安装、使用、配置

1、什么是webpack?

将css、js、png等一些静态的文件进行打包的工具
在这里插入图片描述

2、前端模块化

在这里插入图片描述

3、打包

在这里插入图片描述

4、webpack和grunt/gulp对比

在这里插入图片描述

5、webpack/node/npm三者之间的关系

在这里插入图片描述

6、webpack的安装

在这里插入图片描述

本机安装webpack，必须使用管理员身份运行命令行

在这里插入图片描述
安装成功后，查看webpack版本
在这里插入图片描述安装成功。

7、webpack的使用（案例）

准备工作
在这里插入图片描述
js文件打包
在这里插入图片描述
使用打包后的文件

在这里插入图片描述

7.1、CommonJS规范结合webpack完成模块开发

function add(num1,num2){
  return num1+num2
}

function mul(num1,num2){
  return num1*num2
}

module.exports = {
  add,
  mul
}

// 1.使用commonjs的模块化规范
const {add,mul} = require('./mathUtils.js')

console.log(add(10,20));
console.log(mul(20,30));

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

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

</html>

7.2、ES6规范结合webpack完成模块开发

export const name = 'aaa';
export const age = 18;
export const height=1.88;

// 2.使用ES6的模块化规范
import {name,age,height} from './info.js'
console.log(name);
console.log(age);
console.log(height);

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

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

</html>

使用webpack打包

在这里插入图片描述
效果展示
在这里插入图片描述

8、webpack配置

8.1、出口和入口的配置

在这里插入图片描述

8.2、局部安装webpack

在这里插入图片描述
在这里插入图片描述

8.3、package.json中自定义启动命令

在这里插入图片描述
在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack的介绍与安装
A____t的博客
04-24 281
Webpack介绍： Webpackhttps://www.webpackjs.com/ 简单来说，Webpack是一个前端模块化打包工具。 Webpack支持前端模块化方案：AMD、CMD、CommonJS、ES6等。能够将模块化打包成浏览器可以识别的JS代码，帮助我们处理模块间的依赖关系。 在Webpack中，不仅仅是JavaScript文件，我们的CSS文件、图片、json文件等都被当做模块来管理使用。 Webpack安装： webpack的运行必须依赖node环境，n..
webpack配置插件项
qq_38850058的博客
05-30 218
这篇博客是记了一个关于webpack的笔记 postcss-loader 首先postcss-loader 和 postcss-cssnext 是关于css自动补充前缀的一个插件， webpack 里面rules配置use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’] 项目根目录创建一个postcss.config.js 文件， modu...
前端面试之webpack篇
weixin_34198762的博客
09-27 158
还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面试你一般问你webpack的原理，Loader的原理，你有用那些优化措施前端开发已经模块化，它改进了代码库的封装和结构。打包工具已经成为了一个项目必不可少...
webpack介绍和基本配置
qq_45963655的博客
07-06 309
webpack介绍和基本配置
webpack配置
dwdffefsd的博客
07-02 2368
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack安装配置与常见使用过程详解（结合vue）
10-15
主要介绍了webpack安装配置与常见使用过程，主要结合vue实现，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
webpack-使用配置文件.rar
04-11
webpack-使用配置文件:使用配置文件生成前端代码，最简单的配置文件应用实例。其中将引用的models文件夹删除了
webpack的配置和插件的使用介绍代码
12-25
介绍了webpack的配置插件的依赖包下载配置使用
webpack常用配置项配置文件介绍
09-01
主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
webpack配置文件和常用配置项介绍
08-30
本篇文章主要介绍了webpack配置文件和常用配置项的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
webpack使用流程和配置
husai20的博客
11-27 1402
Webpack基本使用流程 Webpack配置文件 Webpack插件与加载器使用 webpack服务器开发
webpack基本使用及基本配置
tianxingege_的博客
08-22 420
什么是webpack? webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；它可以看作是一个模块打包机，通过一个入口主文件，找到与其相关所有的文件，将这些文件编译打包成浏览器可以识别的语言（vue，ts，less，es6一些高级语法等等）；它可以完美实现资源的合并、打包、压缩（包括将图片转换为base64）、混淆等诸多功能。 1. 安装webpack流程 进入项目根目录 npm init 之后，文件夹下会有一个文件，叫做package.json { "name": "
想聊聊 webpack, 如何来配置 webpack 以及基本使用
web00_11的博客
08-15 794
webpack 的基本使用 什么是 webpack 概念：webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。 在项目中安装 webpack 在终端运行如下的命令，安装 webpack 相关的两个
webpack使用方法（一）：安装webpack
simpleasong的博客
02-19 7193
安装Node.js 首先，webpack是构建在Node.js的基础之上的，所以安装webpack之前，需确保本地安装了Node.js。 Node.js官网：https://nodejs.org/en/ 这里有两个版本可供选择，对于开发用户，推荐下载LTS版本（长期支持版本），建议安装最新版本的Node.js，因为老的版本可能会缺失webpack的一些功能。点击安装一直下一步下一步就好了。 在命令行中输入node -v，能看到node的版本号表示已经安装成功了。 node安装成功的同时，会有另一个工具安装
webpack基础教学，简单易懂（二）（webpack插件）
随便写写
03-18 915
webpack基础教学，简单易懂（二）（webpack插件）
webpack系统配置
duansamve的博客
07-22 6589
简言之，webpack 是一个模块打包器 (module bundler)，能够将任何资源如 JavaScript 文件、CSS 文件、图片等打包成一个或少数文件。 为什么要用Webpack? 首先，定义已经说明了 webpack 能将多个资源模块打包成一个或少数文件，这意味着与以往的发起多个 HTTP 请求来获得资源相比，现在只需要发起少量的 HTTP 请求。 其次，webpack 能将你...
webpack插件解析：HtmlWebpackPlugin是干什么的以及如何使用它
u012443286的博客
06-23 6130
HtmlWebpackPlugin是一个出现频率比较高的webpack插件，本文对其作用和配置作一番比较详细的分析。 为何使用它 简单来说，HtmlWebpackPlugin是用于生成html文件。我们的疑问可能在于，webpack本身不能生成html文件吗？事实上，默认的webpack主要是用于处理js文件的依赖图构建和打包，当需要生成html文件时，便需要使HtmlWebpackPlugin插...
Webpack 从入门到精通-基础篇
最新发布
m0_68271787的博客
06-10 1054
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。下面进入正题。
webpack怎么配置使用 flexible
08-04
然后，在webpack配置文件中，可以使用该插件来自动生成HTML文件，并在HTML文件中引入flexible库。 具体的配置步骤如下： 1. 在webpack.config.js文件中引入HtmlWebpackPlugin插件，可以使用以下代码： ``` const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值