01、webpack起步

最新推荐文章于 2024-06-08 12:24:57 发布
置顶 最新推荐文章于 2024-06-08 12:24:57 发布
阅读量350 收藏 4
点赞数 3
分类专栏： webpack 文章标签： javascript webpack node.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41620231/article/details/114988329
版权

webpack起步

1、起步

webpack用于编译javascript模块

1.1、基本安装

01、创建一个目录

（1）在空白文件夹的地址栏中输入【cmd】，按【回车】（就是键盘的enter键）
在这里插入图片描述
（2）在打开的cmd窗口输入【mkdir webpack-demo】，意思是创建webpack-demo文件，mkdir代表Windows的创建文件的指令，webpack-demo代表为创建文件夹取个webpack-demo名称

mkdir webpack-demo

在这里插入图片描述

02、初始化 npm

（1）在cmd窗口输入【cd webpack-demo】，意思是在当前文件夹进入到webpack-demo文件夹中， cd 代表Windows进入某个文件夹的指令，webpack-demo代表文件名

cd webpack-demo

在这里插入图片描述
（2）在cmd窗口输入【npm init -y】，意思是初始化 npm，webpack-demo文件夹中自动创建了package.json文件

npm init -y

在这里插入图片描述

03、安装webpack和webpack-cli

npm i webpack webpack-cli -s

在这里插入图片描述

04、创建目录

在这里插入图片描述

05、编写index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
    <!-- 引入lodash -->
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <!-- 引入index -->
    <script src="./src/index.js"></script>
  </body>
</html>

06、编写src/index.js

function component() {
  const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

07、启动项目

在这里插入图片描述

08、测试

在这里插入图片描述

1.2、创建一个bundle

01、创建一个目录

在这里插入图片描述

02、安装lodash依赖

-s代表开发依赖，由于_.join([‘Hello’, ‘webpack’], ’ ') 方法是lodash提供的，想使用_.join()方法，必须下载lodash依赖，方可使用_.join()方法。

npm i lodash -s

在这里插入图片描述

03、编写src/index.js

// 导入lodash依赖
import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  // lodash，现在通过一个 script 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

04、编写dist/index.html

引入webpack生成的main.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>
<!-- 引入main.js -->
  <script src="./main.js"></script>
</body>

</html>

05、webpack执行构建

进入指定的文件夹中，执行webpack指令
在这里插入图片描述

06、测试

在这里插入图片描述

1.3、使用一个配置文件

01、创建webpack.config.js

复制【2创建一个bundle】所有文件到【3使用一个配置文件】中，再创建webpack.config.js文件
在这里插入图片描述

02、编写webpack.config.js

//  引入node提供的path依赖
const path = require('path');

//  导出对象
module.exports = {
  // 设置入口文件
  entry: './src/index.js',
  // 设置输出文件
  output: {
    //  输出文件名
    filename: 'main.js',
    //  输出文件路径
    path: path.resolve(__dirname, 'dist'),
  },
};

03、webpack执行构建

进入指定的文件夹执行webpack指令
在这里插入图片描述

04、测试

在这里插入图片描述

2、咨询

如果你觉得本文章对您有所帮助，希望您【点赞】、【评论】、【分享】、【收藏】 。您的【点赞】、【评论】、【分享】、【收藏】就是我写作的动力。如果你需要咨询技术问题与及源代码，可以加本作者微信【hdc1002-】，备注【博客】

在这里插入图片描述

跟着小何学编程
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
webpack-bundle-delta:尽早了解您的webpack v4捆绑包
05-02
注意：该工具仍处于起步阶段，我们欢迎您对其进行改进而做出的。 用法 通过yarn或npm安装yarn add @trainline/webpack-bundle-delta --dev # or npm i -D @trainline/webpack-bundle-delta [可选]根据需要webpack-...
一看就会的保姆级webpack配置介绍
weixin_48357279的博客
05-02 1813
webpack基本介绍 webpack官网 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
IDEA使用webpack管理vue前端项目
猫七姑娘的胡同小巷
05-04 3649
IDEA使用webpack管理vue前端项目 文章目录IDEA使用webpack管理vue前端项目webpack介绍安装webpack步骤1.安装node.js。步骤2：安装npm步骤3：安装cnpm步骤4：安装webpack 使用vue.js开发大型应用需要使用webpack打包工具，本节研究webpack的使用方法。 webpack介绍 Webpack 是一个前端资源的打包工具，它可以将js、...
webpack入门学习手记（三）
weixin_33754065的博客
12-18 139
本人微信公众号：前端修炼之路，欢迎关注。 距离上一次更新这个系列，过去了两天。最近实在是有点忙，没有挤出时间整理。感觉日更还真是困难
webpack基础搭建
qq_50872417的博客
02-23 185
本文只适合新手，和我一样对webpack一点都不了解的人互相学习
看完这篇还搞不懂webpack，求你打我
高先生的猫
07-18 591
一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack？webpack是现代前端技术的基石，常规的开发方式，比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代，数据驱动界面。webpack它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 二、webpack核心概念 1、Entry（
react-webpack-babel：简单的React Webpack Babel入门套件
02-06
这只是为了让您起步，而其余的则取决于您。 我们的目标是使事情保持简单，并让您可以自由选择要添加的框架。 演示版 先决条件 您需要在系统中安装和 。 跑步 分叉并克隆项目： git clone ...
从零开始搭建webpack+react开发环境的详细步骤
12-10
环境主要依赖版本 webpack@4.8.1 ...1. 起步 新建项目目录，初始化npm，新建开发源目录 mkdir webpack-react && cd webpack-react npm init -y mkdir src 2.webpack-cli webpack从4.x版本开始，需要同时安
细说webpack源码之compile流程-入口函数run
01-19
　现在正式进入打包流程，起步方法为run： Compiler.prototype.run = (callback) => { const startTime = Date.now(); const onCompiled = (err, compilation) => { /**/ }; this.applyPluginsAsync(before-run,...
程序员面试刷题的书哪个好-learn-webpack:学习webpack
07-07
Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。 # 初始化项目 npm init -y 本地安装 最新的webpack版本是： 要安装最新版本或特定版本，请...
webpack学习之helloworld(一)
凡夫俗子
10-28 990
1、webpck是什么 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle 2、从零搭建一个helloworld        2.1   安装we...
webpack
weixin_33721344的博客
10-17 107
请参考右边网页的Installation和Getting Started篇：https://webpack.js.org/guides/ 安装webpack 先使用git bash进入一个你想安装的位置，然后请在git bash里输入如下命令，该命令将下载最新版本的webpack。 cd //这里填写你想安装的位置 npm install...
18 Webpack 代码分离
dabusidede的博客
07-20 219
代码分离 此特性能够把代码分离到不同的bundle 中，然后可以按需加载或并行加载这些文件。意思就是动态加载 有三种常用的代码分离方法： 入口起点：使用entry配置手动地分离代码。 防止重复：使用CommonsChunkPlugin去重和分离chunk。 动态导入（推荐）：通过模块的内联函数调用来分离代码。 入口起点(entry points) 先来看看如何从main bundle 中分离另一个模块： webpack.config.js constpath =re...
webpack学习笔记
虾米博客
02-24 647
Webpack学习笔记https://doc.webpack-china.org/concepts/   webpack的官方文档第一节:安装 webpack1、打开命令行，cd 到 F 盘，输入命令: mkdir webpack-demo (mkdir:创建新文件夹)  然后 cd 到 webpack-demo，输入命令:npm install -g webpack (-g:全局安装)  在全局...
webpack 傻瓜式安装教程
weixin_39357177的博客
08-18 255
在一个全英文目录下新建一个全英文的文件夹 以命名为webpack为例，进入该文件夹里面 shift+鼠标右键，点击在此处打开命令行 安装webpack： npm install --save-dev webpack 如果你使用的webpack 4+ 版本，还需安装cli： npm install --save-dev webpack-cli 等待安装完成，输入以下命令： webp...
ssm602社区医疗保健监控系统+vue【以测试】
最新发布
xiaoleixiao112的博客
06-08 469
开发语言：Java数据库：MySQL系统架构：B/S后端：SpringBoot(MyBatis)前端：Vue工具：IDEA，JDK1.8，Maven如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统社区医疗保健信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个社区医疗保健监控系统，可以解决许多问题。
基于jeecgboot-vue3的Flowable流程-待办任务（一）
宁波阿成的博客
06-03 442
基于jeecgboot-vue3的Flowable流程-待办任务（一）
Ruoyi-Vue-Plus 下载启动后菜单无法点击展开，
06-07 161
1.框架下载后运行2.使用mock数据3.进入页面后无法点击菜单本以为是动态路由或者菜单逻辑出了问题，最后发现是websocket的问题。
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 737
手写最小的 Agent 系统 — Tiny Agent
webpack webpack.defineplugin
08-25
Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具。它可以将应用程序的不同模块依赖关系转化为静态资源，并且可以通过配置进行自定义的处理。 webpack.DefinePlugin 是 Webpack 提供的一个插件，用于在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值