webpack初级使用案例-超详细

最新推荐文章于 2024-08-20 17:38:15 发布
最新推荐文章于 2024-08-20 17:38:15 发布
阅读量572 收藏 1
点赞数
文章标签： 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_35901646/article/details/115793554
版权
这篇博客详细介绍了如何从创建初始目录到配置并使用webpack进行js文件打包。首先，创建项目目录，安装webpack和webpack-cli，接着创建package.json文件。然后，将webpack作为项目依赖，并配置webpack.config.js。通过运行webpack命令，生成了dist目录中的main.js。最后，在index.html中引入main.js并验证打包后的js文件在浏览器中能正常工作。
摘要由CSDN通过智能技术生成

目录

1.创建初始目录文件

2.确保环境中安装了webpack和webpack-cli

3.在根目录下创建package.json文件

package.json文件代码

4.为本项目安装webpack作为依赖

5.在根路径下新建并配置webpack.config.js文件

6.开始打包js文件

7.检查一下生成的js文件

8.验证一下生成的js可用性

在index.html文件中引入main.js文件

index.js配置

9.查看index.html页面

1.创建初始目录文件

图中的3个目录创建出来，然后在src下面建立index.html和index.js文件

两个文件可以先空着，没关系接着走下一步

2.确保环境中安装了webpack和webpack-cli

如果没有安装，需要执行下面两个命令

$ cnpm install webpack -g
$ npm install webpack-cli -g

3.在根目录下创建package.json文件

package.json文件代码

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "weboack --mode development",
    "build": "webpack --mode production
最低0.47元/天 解锁文章
我是一名程序猿
关注
Webpack 打包工具全析
Halin's CSDN
02-27 502
Webpack webpack官网 webpack中文网 概念 ==> webpack 是什么?? 前端模块化打包(构建)工具   webpack 的两个方面 1 - 打包 2 - 模块化 打包 : 前端打包(构建)都能做什么?? 语法转换 - Less/SASS 预编译CSS -> CSS -> 浏览器中使用 - ES6 新语法有兼容...
请用心练完这16个webpack小例子
weixin_45566319的博客
09-29 276
16个demo，webpack+react搭配使用 首先教大家2个新技能 1.按照正常github地址情况下，你的github本身不能访问目录。 例如要访问vue-demo下的vueCpu文件夹:github.com/holidaying/… （master是分支名）就可以访问。 2.github目录的制作 明确一个问题。一个标题就是一个目录名称 写法xx#不能少 题目名称的写法规则：abc de...
webpack的学习案例
08-25
webpack入门学习
webpack使用示例
qq_43750656的博客
01-29 231
一、初始化一个node项目 npm init -y
搞懂 webpack ! 淦
写代码的女生酷不酷
08-20 738
webpack ？？？？？？？？？？？？？？？？？
1、最简单的webpack实例
源码好优多
01-09 554
0.1、安装webpack 首先你需要安装Node.js，点击打开Node.js下载页面。安装完Node.js后，会自带npm包管理器。 npm install webpack -g 这个命令将安装最新版本的webpack（全局) webpack -v 0.2、查看当前webpack版本 执行命令： 以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。 快速
Webpack使用案例
weixin_44610169的博客
09-01 428
Webpack是一个前端资源加载/打包工具（因为js、css文件太多），可以将多个静态资源（js、css、less）转换成一个静态文件，减少了页面的请求，降低服务器压力，提高访问效率。
webpack 笔记，一个简单例子
Wanan
11-26 462
项目准备cnpm install webpack -g // 全局安装 cnpm init // 初始化项目 cnpm install webpack --save // 本地安装 cnpm install html-webpack-plugin --save // 把编译后的文件放到html文件 cnpm install style-loader css-loader --save // css
webpack实例解析一(基础)
秋刀鱼笛滋味
06-13 349
webpack的作用大家都知道：把项目中的各种资源，解析后打包打一起 安装 建议安装带本地 而不是全局，避免版本问题 cnpm i webpack webpack-cli -D 创建一个demo文件夹，结构如下 package,json 各种包 { "name": "webpack", "version": "1.0.0", "description": "", "script...
程序员简历模板-前端简历模板框架
09-17
- **建议**: 对于技术掌握程度不确定的新手或初级前端开发者，避免使用“熟练掌握”、“熟悉”、“精通”等词汇，而是直接列举所掌握的技术栈。 - **技术栈示例**: - **基本技能**: HTML、CSS、JavaScript、AJAX等...
webpack实例代码
08-02
博客中webpack实例的代码,已删除node_module文件夹,专栏地址:https://blog.csdn.net/column/details/25661.html
webpack-example:一个简单的例子，如何使用webpack
05-17
webpack示例 一个简单的例子，如何使用webpack 试试我！ npm install webpack -g git clone https://github.com/ohall/webpack-example cd webpack-example npm install webpack 现在，将浏览器指向index.html ，它将链接您创建的新bundle.js 。
jmzf11-jmzf11-Jose-First-网站
02-12
6. 构建工具和配置文件：如果项目使用了构建工具（如Webpack或Gulp），可能会有配置文件（如webpack.config.js）和其他脚本。 7. README或其他文档：这些文件可能包含项目说明、安装指南或开发者注释。 8. 项目...
vue2[初级] 嵌套路由
u011664286的博客
09-24 850
VUE 嵌套路由
Webpack案例学习
phpzealer的专栏
07-06 1598
注：本来自己是打算学习一下requirejs的，结果从社区了解到Webpack的功能更强大而且更好用，就搜索到了篇文章。 本文是照着阮一峰老师的demo进行的练习。详见https://github.com/ruanyf/webpack-demos。这些列子都写得很简单明了，让我学习起来感觉轻松不少！ Webpack要怎么才能使用1、首先必须要安装node，npm这些环境工具啦！ 2、其次要安
webpack简单例子
仇益阳的博客
06-05 524
webpack打包简单例子 安装node 查看node版本，node-v，查看npm版本，npm-v 创建一个新文件夹 mkdir my-project 打开文件夹cd my-project 初始化项目 npm init -y 初始化webpack npm install webpack webpack-cli --save-dev\ 查看webpack版本 ./no...
webpack学习笔记（2）：webpack的超级简单的例子
W先生
08-04 309
一个超级简单的例子 新建一个webpack配置文件 文件： webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'production' }; 创建
webpack第一个实例
weixin_39308542的博客
07-10 172
1.安装node 2.安装cnpm 3.cnpm init生成package.json 4.全局安装webpack cnpm install webpack -g 5.全局安装 webpack-cli cnpm install webpack-cli -g 6.全局安装webpack-dev-server cnpm install webpack-dev-server -g 7....
使用webpack-cli-plugin：你可以使用webpack-cli-ignore-deprecation 详细代码
最新发布
10-13
以下是详细的代码示例，如何在Webpack配置中使用它： ```javascript const WebpackCLIIgnoreDeprecationWebpackPlugin = require('webpack-cli-ignore-deprecation'); module.exports = { // ... 其他Webpack配置...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是一名程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值