webpack初步使用

最新推荐文章于 2024-08-09 19:12:53 发布
最新推荐文章于 2024-08-09 19:12:53 发布
阅读量113 收藏
点赞数
分类专栏： vue webpack 文章标签： node.js es6 vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012758488/article/details/108370978
版权
vue 同时被 2 个专栏收录
40 篇文章 1 订阅
订阅专栏
webpack
13 篇文章 0 订阅
订阅专栏

1.webpack能够处理js文件的互相依赖关系；能够处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的浏览器能正常识别的语法

 

一、新建项目如下

包含最基本的css，js等，然后执行命令npm init -y初始化npm环境，如图：

项目中会多出package.json文件

将main.js用webpack构建到dist目录，使浏览器能识别es6语法

你是人间五月天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack初步了解
木头房子的格子铺
03-12 705
webpack初步了解 webpack初步了解 构建工具 构建工具的功能 常用的构建工具 webpack介绍 webpack命令 webpack常用配置介绍 出入口 Entry&Output entry配置 output的配置 模块 Module 模块加载（转换）器 Loader loader学习 使用loader的三种方式 babel 插件 Plugin web...
Webpack初步使用
weixin_30497527的博客
06-17 52
前端使用vue时使用webpack打包工具：注意使用webpack打包工具时，不建议在html文件中引入任何其他文件 1.新建文件夹，在文件夹下创建目录 |--dist |--src |--css |--js |--img |--index.html |--main.js //这个是所有的Js文件的入口 |--webpack.co...
webpack的初步使用
weixin_43160044的博客
06-27 101
对于前端来说，学习一个打包器是非常有必要的，而目前来说webpack就是最好的选择之一，接下来让我们来看看如何使用 1.安装node.js和npm 可以通过node -v，npm -v来查看版本 2.初始化项目 在项目目录里cmd输入npm init -y，初始化成功的话我们的项目目录里会出现一个package.json文件，代码如下 3.接下来就可以开始安装webpack了 这里不推荐全局安装...
Webpack初步了解 -2
_web_Z的博客
06-23 138
1.开启source map定位错误文件及行号 在webpack.config.js中添加 devtool: inline-source-map 2.使用观察模式（watch），文件更新，重新编译 存在的问题：代码会重新编译，但是还是需要刷新浏览器，如果有自动刷新浏览器的功能就好了，so 使用 webpack-dev-server实现此功能 npm install --save-dev webpack-dev-server ...
Webpack第1篇，Webpack初步应用，Webpack基础（Webpack是什么，Webpack的基本使用，Webpack有什么用，如何使用，Webpack手把手教学）
最新发布
weixin_65793170的博客
08-09 1034
⭐Webpack 是一款用于现代 JavaScript 应用程序的模块打包工具（module bundler）。它把项目中的所有依赖，包括JavaScript文件、CSS、图片、字体等静态资源，按照你定义的规则和配置，打包成一个或多个优化过的静态文件。这些打包后的文件可以被浏览器加载并运行，使得你的应用可以在Web上运行。尽管市场上诞生了众多打包工具，如 Vite、Parcel、Rollup 等，但是 Webpack 凭借拥有着极其丰富的生态系统，仍在模块打包工具中一直保持着领先地位。这里
webpack初步认识，使用
丢失的Litte_志伟的博客
11-27 110
webpack初识 项目打包代码使用的工具 一：webpack打包需要使用的那些 webpack （webpack大部分用于单页应用的打包，只有一个html文件） 打包工具，在package.json里面可以创建命令来使用webpack，或直接在cmd使用webpack命令。或创建自己的命令，npm run …命令。一般使用npm命令，为bulid，构建，打包。就会生成一个dist目录，所有打包的文件，都会在dist文件夹里面（会生成一个main.js） webpack-cli 脚手架 在调用webpack
Webpack初步了解 - 1
_web_Z的博客
06-23 85
1.调整package.json文档 确保安装包是私有的，并且移除main.js，目的时防止意外发布代码。 2.要在index.js中打包依赖比如lodash，需要在本地安装library（库） npm install --save lodash 注意：当我们安装一个package时，如果打包到生产环境bundle中，使用 npm install lodash --save 如果只是用于开发环境，比如linter，测试库等，使用命令 npm install --save-dev lodash
【webpack】webpack初步了解（存档自用）
Ranye的博客
07-14 1632
总结来说，webpackDevServer.config.js配置文件是用于配置Webpack Dev Server的选项和行为，而Webpack Dev Server本身会在内部使用Express作为底层服务器框架，无需手动编写相关的Express接口代码。总结来说，webpackDevServer.config.js是用于配置Webpack开发服务器的配置文件，而webpack.config.js是主要的Webpack配置文件，用于配置Webpack的构建过程。
初步了解webpack
qq_44862403的博客
07-17 367
webpack 1,创建项目文件夹 2,初始化 npm init -y 3,下载依赖包 npm i webpack webpack-cli -D 4,打包 默认entry入口 src/index.js 默认output出口 dist/main.js 打包模式 在package.json文件scripts中配置： “dev” ：“webpack --modle development” “build”:webpack --modle production" 使用配置文件打包 1,新建一个webpack.c
Universal-Webpack：同构Webpack：在客户端和服务器上
02-06
需要一些初步的设置和Webpack的一些先验知识。 小型广告： :telephone_receiver: 如果您正在寻找React电话号码组件，请查看 安装 npm install universal-webpack --save-dev 示例项目 您可以作为使用此库的参考...
vue和webpack安装命令详解
08-27
Vue.js和Webpack的安装是前端开发的初步步骤。Vue CLI简化了Vue项目的初始化和配置，而Webpack则负责将项目中的各种资源打包成浏览器可执行的代码。了解并掌握这些基本的安装和配置命令，将有助于提升前端开发的效率...
Webpack系列(一)：初步使用Webpack
yu923023913的博客
06-03 322
一、为什么要使用Webpack？ 随着前端工程越来越复杂，单独写几个文件来写业务代码，这样的方式已经无法保证项目的可维护性了，所以我们就想把不同的业务逻辑拆成模块然后去分开引入这些模块，每个模块自己做自己的事情。这样就可以保证项目地维护性和可扩展性了！ 但假如你有几千个模块，那你能在页面上引入几千个js文件吗？所以当项目大到这种程度的时候，我们就得借助工具来管理我们的这些模块了！ 而Webpack就是可以帮助我们管理复杂项目的一个工具。 与Webpack类似还有很多相似的工具，比如说Gulp，Grunt，
ant design change等方法默认传值加上自定义参数传值
热门推荐
u012758488的博客
07-09 1万+
<a-select @change="value => handleChange(value, param)" v-model="eqList[index].eqId"> </a-select> 如上所示： handleChange的value参数即为默认参数，param为自定义参数 ...
vue使用watch监听data的变化
u012758488的博客
07-06 9353
<!DOCTYPE html> <html lang="en"> <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>Do.
vue v-for使用详解
u012758488的博客
04-07 4751
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue组件中style的lang属性和scoped属性
u012758488的博客
11-03 2965
<template> <div> <h1>这是account组件</h1> <router-link to="/account/child1">子组件1</router-link> <router-link to="/account/child2">子组件2</router-link> <router-view></rou.
vue使用watch监听路由地址的变化
u012758488的博客
07-12 2898
<!DOCTYPE html> <html lang="en"> <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>Do.
es6 使用export default 和export 向外暴露成员
u012758488的博客
10-26 2134
一、export default 注意事项： export default向外暴露的成员可以使用任意的变量来接收； 在一个模块中，export default只允许向外暴露一次； 在一个模块中可以同时使用export default 和export向外暴露成员； 二、export 注意事项： 使用export向外暴露的成员，只能使用{ }的形式来接收； export可以向外暴露多个成员，同时，如果某些成员我们在import的时候不需要，则可以不再 { }中定义； 使用export向外暴露的
vue使用style内联样式
u012758488的博客
04-07 2110
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值