webpack安装步骤

最新推荐文章于 2024-05-29 21:08:09 发布
最新推荐文章于 2024-05-29 21:08:09 发布
阅读量1.2k 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Doulvme/article/details/79798814
版权

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS、coffee、样式（含css/less/sass）、图片等作为模块来使用和处理。

可以直接使用require()语法的形式来引入各模块，即使它们可能需要经过编译（如jsx和sass），但我们无需在上面话费太多心思，因为webpack有着各种健全的加载器（loader）会默默处理。

webpack安装与配置

1、webpack是基于node.js的，所以先在node.js官网下载node.js并安装。

2、在控制台通过npm init会自动生成package.json文件，有关提示的version、description等信息一路点击enter（默认即可），在package.json文件中的scripts中添加“dev”:"webpack"，注意必须用""括着，用于后面进行webpack打包运行。


具体通过下面例子对是否安装成功进行测试
3、打开控制台找到项目所在目录，在控制台通过 npm i -D webpac
最低0.47元/天 解锁文章
soosgo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何成功安装webpack
princess66的博客
11-01 9514
如何成功安装webpack
webpack安装与使用（详细）
热门推荐
qq_43812504的博客
06-25 2万+
webpack是现代javascript应用程序的静态模块打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack更加强调模块化开发管理，文件压缩、预处理等功能，是它附带的功能。 注意：安装webpack ,要先安装node.js node.js自带了软件包管理工具npm 1.查看node版本（node的安装自行查找，很简单） 2.全局安装webpack,
webpack快速入门---webpack的安装和基本使用
最新发布
I_am_shy的博客
05-29 1260
/ 引用nodejs的path模块mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},module:{//配置模板rules:[//规则设置test: /\.js$/,//只对js文件生效。
webpack的安装与配置使用 最全最详细的小白教学
llq007007的博客
02-13 2977
less-loader css-loader sass-loader postcss-loader babel-loader file-loader url-loader eslint-loadereslint-loadereslint-loader html-webpack-plugin mini-css-extract-plugin css-minimizer-webpack-plugin eslint-webpack-plugin copy-webpack-plugin
webpack的安装
m0_74176885的博客
05-04 491
当您使用Vue CLI创建项目时，它会自动为您配置和安装所需的依赖项，包括Webpack、babel-loader、CSS和图片加载器等。是用于启动开发服务器，以便在您本地环境中进行开发和测试Vue应用程序，并且不涉及Webpack的安装。是用于全局安装Vue CLI工具，而不是安装Webpack。命令1：npm install -g @vue/cli。命令2：vue create xxxx。命令3：npm run serve。Webpack是在执行第二条命令。
手牵手带你掌握webpack5.x的安装与使用
weixin_44995391的博客
08-03 463
手牵手带你掌握webpack5.x的安装与使用
webpack打包步骤和使用方法.txt
12-03
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理...
webpack的基本原理及手动配置webpack的详细步骤
07-03
这个文档里面记录了手动配置webpack的详细步骤，每个步骤都有相应的说明和截图说明。以及我在手动配置webapck的时候遇到的一些问题以及解决方法，里面的内容主要有前端工程化，webpack的基本使用，webpack中的插件，...
Vue.js与Webpack安装教程
10-30
Vue.js和Webpack是现代前端开发中的两个重要工具。Vue.js是一个轻量级的JavaScript框架，以其易学易用、组件...这份“Vue.js与Webpack安装教程”文档很可能会涵盖这些内容，并提供详细的步骤指导，帮助初学者快速上手。
Webpack的安装说明书
05-25
Webpack的安装时详细的步骤，以及兼容性的版本推荐
webpack搭建vue 项目的步骤
08-28
Webpack 搭建 Vue 项目的步骤 本文将详细讲解如何使用 Webpack 搭建 Vue 项目，包括前期准备、创建项目、引入 Webpack、引入 Vue、引入 Babel 等步骤。 一、前期准备 在开始搭建 Vue 项目之前，需要安装 Node.js ...
webpack5搭建与基本配置
Seven_Ting的博客
07-08 1756
首先在build文件目录下新建四个js文件。
webpack安装步骤（一）
weixin_46022934的博客
02-17 859
一、Webpack是什么？ Webpack官网解释 解释内容如下图 二、Webpack的安装步骤 第一步：检查本机是否已经安装过Webpack（全局） 1.操作如下 2.结果如下图 第二步：安装webpack（非全局） 1.创建一个文件（vscode或者终端打开） 2.执行项目初始化命令（不明白可以点🔗） 执行命令如下（下面🔗有解释） 具体如下图 3.执行安装webpack命令 命令如下 成功如下图 总结（必看必看⚠️⚠️）
webpack安装配置
TardisKey的博客
07-03 259
此时dist文档下出现一个bundle.js的文件,修改dist/index.html 改成引入bundle.js。同时在dist中创建一个index.html ,在src中创建一个index.js。–save-dev 表示保存在项目里，并写入package.json配置文件。新建dist文件夹（浏览器最终要读取的文件都输出在这里面），src文件夹（用于创建一个项目入口，自己项目都写在这里）在 webpack.config.js 配置相关参数。结束后，生成一个packge.json文件。
webpack安装及使用
katherin_wanzi的博客
06-17 639
一.安装webpack 以管理员身份打开node.js 输入npm install webpack webpack-cli -g下载安装webpack 二.使用webpack 1.创建如下文件夹 2.代码部分 hello.js代码： exports.sayHi = function() { alert("Hello Webpack!!!"); } index.js代码： var hello = require("./hello"); hello.sayHi(); webpack.config
下载安装webpack
WGTkris的博客
07-20 7051
下载安装webpack的步骤
Webpack 安装
卡尔特斯
09-28 46
Webpack官网、Node.js官网、npm官网、npm中文官网、npm使用以及命令含义 Webpack 需要基于 Node.js、npm 如果是使用 Vue 进行开发，vue 自带的脚手架里面就包含了 Webpack，可以直接项目内使用。当然也可以自己在安装一个自己玩使用，毕竟那个是在脚手架里面的，外部还是可以在安装一个自己玩的。 MAC电脑 Node.js 、npm 推荐使用 Homeb...
webpack史上最详细的安装步骤
qq_41740017的博客
06-07 445
安装步骤： 1. npm  init 2. npm  install  webpack  -g 全局安装，如果不进行全局安装，则输入webpack命令时会出现"command not found." 3. npm  install  webpack  --save-dev 局部安装，可以具体制定版本号， 4. npm  install  webpack-cli  -g 全局安装 5.npm  in...
WebPack的安装及使用
童一的博客
04-16 5194
学习目标： WebPack的安装及使用 学习内容： WebPack的使用 学习时间： 学习产出： WebPack 1、介绍 WebPack是一款模块加载打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片 等都作为模块来处理和使用。 本质上，WebPack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当WebPack处理应用程序程序时，它 会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个
webpack打包步骤
08-18
Webpack是一个现代的前端打包工具，用于将多个模块打包成一个或多个静态资源文件。下面是Webpack的基本打包步骤： 1. 安装Webpack：首先，需要在项目中安装Webpack及其相关的依赖。可以使用npm或yarn来进行安装。例如，使用npm安装Webpack可以执行以下命令：`npm install webpack webpack-cli --save-dev` 2. 创建Webpack配置文件：在项目根目录下创建一个名为`webpack.config.js`的文件，该文件用于配置Webpack的打包行为。 3. 配置入口和出口：在`webpack.config.js`文件中配置打包的入口和出口。入口是指Webpack开始构建的文件，出口是指构建后生成的静态资源文件。 4. 配置加载器（Loaders）：Webpack通过加载器来处理各种类型的文件。加载器允许你在打包过程中对文件进行转换、处理和优化。在配置文件中，可以定义各种加载器，并为不同类型的文件指定相应的加载器。 5. 配置插件（Plugins）：Webpack插件可以在打包过程中执行各种任务，例如优化、压缩、拷贝文件等。在配置文件中，可以定义各种插件，并根据需要进行配置。 6. 运行打包命令：完成以上配置后，可以在终端中执行打包命令来运行Webpack。通常，可以使用`npx webpack`命令来运行Webpack，并根据配置文件中的设置进行打包。 7. 查看打包结果：Webpack打包完成后，会生成一个或多个静态资源文件，可以根据配置文件中的设置确定生成的文件名和路径。可以在浏览器中查看打包结果，或将生成的文件部署到服务器上。 这是Webpack的基本打包步骤，如果需要更详细的配置和使用指南，可以参考Webpack官方文档或相关教程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值