前端-webpack初体验

最新推荐文章于 2024-08-02 13:35:44 发布
最新推荐文章于 2024-08-02 13:35:44 发布
阅读量214 收藏
点赞数
分类专栏： 前端 # webpack 文章标签： 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Apple_Coco/article/details/107075480
版权

初始化配置

  1. 初始化 package.json

    npm init

  2. 下载并安装 webpack

    npm install webpack webpack-cli -g
npm install webpack webpack-cli -D

编译打包应用

  1. 创建文件

  2. 运行文件

    开发环境指令：webpack src/js/index.js -o build/js/built.js --mode=development

    功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法

    生产环境指令：webpack src/js/index.js -o build/js/built.js --mode=production

    功能：在开发配置功能上多一个功能，压缩代码

  3. 结论

    webpack 能够编译打包 js 和 json 文件。

    能将 es6 的模块化语法转换成浏览器能识别的语法。

    能压缩代码

  4. 问题

    不能编译打包 css、img 等文件。

    不能将 js 的 es6 基本语法转换为 es5 以下语法。

相关文章

如果您觉得这篇文章对您有帮助，欢迎为我的 github项目 点一个⭐

Apple_Coco
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Webpack 初体验
01-20
Webpack 是前端开发中的一款重要工具，它是一款模块打包器，主要负责将JavaScript、CSS、图片等资源文件进行处理和组织，以便在浏览器中高效运行。随着前端应用的复杂度日益增加，Webpack 的出现解决了手动管理依赖...
Webpack笔记（一）：初体验
啊啊怪的学习日记
01-07 215
1、 Webpack是什么？ Webpack是一个前端资源加载/打包工具，简单来说，就是将一些浏览器不认识的语法转换成浏览器能识别的语法 比如说，将ES6转换成平时常见的JS代码，将Less转换成css代码等等 1.1 Webpack的五个核心概念 1.1.1 Entry 入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图 1.1.2 Output 输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名 1.1.3 Loader Lo
Dva-Ts-Webpack-Antd：关于dva + ts + webpack + antd的项目构建
02-09
总的来说，Dva-Ts-Webpack-Antd项目展示了如何利用这些技术有效地构建一个现代前端应用。通过Dva管理状态，TypeScript保证类型安全，Webpack优化资源，Ant Design提供UI组件，可以创建出高效、稳定、易于维护的前端...
前端开源库-freshman
08-30
【前端开源库-freshman】是一个专为初入前端开发领域的“大一新生”，即新手程序员设计的功能工具包。这个项目旨在提供一个易用、全面的起点，帮助新程序员快速上手并熟悉前端开发的基本技能和常用工具。下面将详细...
react-React初中级项目CnodeJS社区重构
08-15
在这个项目中，我们将对CnodeJS社区的网页进行React重构，以提升用户体验并利用React的优势。 **项目目标** 1. **组件化重构**：将CnodeJS社区的各个页面和功能拆分为独立的React组件，如导航栏、话题列表、话题...
web前端开发-web前端框架-vuejs框架课件ppt教材-学习（从入门到精通）
03-23
#### 三、Vue.js初体验 - **Hello Vue.js** - 创建Vue实例，指定挂载点及初始数据。 - 示例代码: ```javascript new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ``` - **响应式原理**: ...
Cesium-Vue3整合Cesium最简教程
Apple_Coco的博客
07-02 4617
文章目录前言配置创建 Vue3 项目安装 Cesium编写 Vue 组件运行项目可能遇到的问题 前言 我之前写过一篇博客，关于 Cesium1.74+Vue2.6.12环境搭建，最近在学习 Vue3，又正好了解到有一款 Vue 整合 Cesium 的插件神器，它可以让我们在 vue-cli 中零配置使用 Cesium，简直不要太方便。下面介绍详细的配置过程~ 配置 创建 Vue3 项目 全局安装 vue/cli npm install -g @vue/cli 创建一个新的 vue 项目 vue c
Cesium1.74+Vue2.6.12环境搭建
Apple_Coco的博客
10-10 1573
环境介绍 创建一个 Vue 项目 项目代码结构介绍 安装 Cesium 环境 设置 webpack 配置项，使其支持 cesium 编写 Vue 组件 禁用 ESLint 代码检查 npm run dev 运行项目 环境介绍 项目环境 版本 命令 NodeJs v12.18.3 node --version Npm v6.14.6 npm -v vue/cli v4.5.6 vue --version vue v2.6.12 npm list vue webpack v3.
ES5知识点总结
Apple_Coco的博客
05-26 344
前端-ES5知识点总结 严格模式 概念 目的 使用 作用 JSON 对象 JSON.stringify(obj/arr) JSON.parse(json) Object 扩展 Object.create(prototype, [descriptors]) Object.defineProperties(object, descriptors) Array 扩展 Array.prototype.indexOf(value) Array.prototype.lastIndexOf(valu
前端-webpack概述
Apple_Coco的博客
07-02 323
webpack 是什么 webpack 五个核心概念 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器（module bundler）。在 webpack 看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。 webpack 五个核心概念 Entry 入口（Entry）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Out.
前端-webpack开发环境基本配置
Apple_Coco的博客
07-02 315
创建配置文件 打包样式资源 打包 HTML 资源 打包图片资源 打包其他资源 devserver 开发环境配置汇总 创建配置文件 创建文件 webpack.config.js 配置内容如下 // node 内置核心模块，用来处理路径问题 // resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { // 入口起点 entry: './src/js/index.js', // .
ES6知识点总结（一）
Apple_Coco的博客
05-26 312
let 和 const 关键字 let 关键字 const 关键字 变量的解构赋值 对象的解构赋值 数组的解构赋值 模板字符串 简化的对象写法 箭头函数 let 和 const 关键字 let 关键字 作用 let 与 var 类似，用于声明一个变量 特点： 在块作用域中有效 不能重复声明 不会预处理，不存在变量提升 应用： 循环遍历加监听 使用let取代var是趋势 // 报错：age is not defined // console.log(age); let a.
前端-webpack生产环境基本配置
Apple_Coco的博客
07-02 292
提取 css 成单独文件 css 兼容性处理 压缩 css js 语法检查 js 兼容性处理 js 压缩 HTML 压缩 生产环境配置汇总 提取 css 成单独文件 下载 plugin npm i mini-css-extract-plugin -D 修改配置文件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractP.
ES6知识点总结（三）
Apple_Coco的博客
05-29 220
iterator 接口机制 Generator 函数 对象的 Symbol.iterator 属性 Generator 应用案例 async 函数 async 应用案例 Class 机制 iterator 接口机制 概念 iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制 其工作原理和 C++ 的 iterator 很相似 作用 为各种数据结构，提供一个统一的、简便的访问接口 使得数据结构的成员能够按某种次序排列 ES6 创造了一种新的遍历命令 for…of 循环，Iter.
ES6知识点总结（二）
Apple_Coco的博客
05-27 182
三点运算符 形参默认值 Promise 对象 Promise 应用案例 Symbol 三点运算符 用来取代 arguments ，但比 arguments 灵活，只能放在形参的最后 function fun(...values) { console.log(arguments); // arguments 是伪数组，没有 forEach 函数 // arguments.forEach(function (item, index) { // console.log(.
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1383
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
最新发布
m0_62336925的博客
08-02 298
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 877
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
terser-webpack-plugin与uglifyjs-webpack-plugin
05-02
terser-webpack-plugin与uglifyjs-webpack-plugin是两个用于压缩JavaScript代码的插件，都可以用于Webpack。 uglifyjs-webpack-plugin是一个旧的插件，它使用UglifyJS进行压缩。它已经被广泛使用了很长一段时间，并且在许多项目中仍然被使用。但是，它已经不再维护，而是由terser-webpack-plugin取代。 terser-webpack-plugin是一个新的插件，它使用Terser进行压缩。它比uglifyjs-webpack-plugin更快，同时也支持ES6语法。它也有更好的默认设置，可以更好地优化代码。 综上所述，如果你需要在Webpack中压缩JavaScript代码，应该使用terser-webpack-plugin。如果你目前正在使用uglifyjs-webpack-plugin，应该考虑升级到terser-webpack-plugin。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Apple_Coco

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

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

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

打赏作者

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

抵扣说明：

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

余额充值