前端-webpack初体验

最新推荐文章于 2022-08-31 17:28:10 发布
原创 最新推荐文章于 2022-08-31 17:28:10 发布 · 274 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #webpack

本文详细介绍了Webpack的基本配置与核心功能，包括初始化配置、编译打包JS和JSON文件、转换ES6模块化语法以及代码压缩。同时，也指出了Webpack不能处理CSS、img等文件以及不支持将ES6基本语法转换为ES5以下语法的局限。

初始化配置

  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项目 点一个⭐

Vue.js- webpack 详解
hxy1625309592的博客
04-28 2871
1.1 什么是Webpack？ 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 前端模块化 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。 而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块
qiankun-微前端初体验
前端程序猿steven的博客
08-18 2158
这里写自定义目录标题1、微前端2、什么是微前端2.1技术栈无关2.2独立开发、独立部署2.3增量升级2.4独立运行时3、初步简单使用介绍3.1 首先创建基座项目，即顶层项目，用来包裹各个微项目。3.2 首先创建vue微项目，可独立运行，可加载在父级项目。3.3 首先创建react微项目，可独立运行，可加载在父级项目。4、启动3个项目测试下 1、微前端 qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun 孵化自蚂蚁金融
Webpack笔记（一）：初体验
啊啊怪的学习日记
01-07 301
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
前端必须会-Webpack优化手段
weixin_51225684的博客
08-31 518
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
前端-webpack概述
Apple_Coco的博客
07-02 426
webpack 是什么 webpack 五个核心概念 webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器（module bundler）。在 webpack 看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。 webpack 五个核心概念 Entry 入口（Entry）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Out.
前端-webpack开发环境基本配置
Apple_Coco的博客
07-02 441
创建配置文件 打包样式资源 打包 HTML 资源 打包图片资源 打包其他资源 devserver 开发环境配置汇总 创建配置文件 创建文件 webpack.config.js 配置内容如下 // node 内置核心模块，用来处理路径问题 // resolve 用来拼接绝对路径的方法 const { resolve } = require('path'); module.exports = { // 入口起点 entry: './src/js/index.js', // .
前端-webpack生产环境基本配置
Apple_Coco的博客
07-02 502
提取 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.
webpack3.0案例（一）-- webpack初体验
tycsbs的博客
11-30 726
写在前面这篇文章是自己在整理webpack相关的东西时候突发奇想，想整理出一套由浅入深的博文以此鞭策自己学习，也希望能够帮助想学习webpack的同学，目前都是入门级别的，大佬请出门右转。学习完本篇文章，我希望您能够掌握以下几点： * webpack是什么 * webpack有什么有点 * webpack.config.js配置项中，出口（entry）、入口（output）、插件（
尚硅谷-webpack
m0_56079094的博客
02-10 1030
1 webpack初体验 1.1准备工作 1.初始化包描述文件 npm init 2.全局安装webpack npm i webpack-cli -g 3.将webpack添加到package.json的依赖中 npm i webpack-cli -D 1.2运行指令 运行不了的话前面加npx 开发环境： webpack ./src/index.js -o ./build/built.js --mode=development （webpack会以./src/index.js -o作为入口文件进行打
前端学习笔记-Webpack
ZZay's
11-04 223
前端学习笔记-Webpack 文章目录前端学习笔记-Webpack1. Webpack简介1.1 基本介绍1.2 五个核心概念2. Webpack初体验2.1 初始化配置2.2 编译打包应用3. Webpack开发环境-基本配置3.1 样式资源3.2 HTML资源 1. Webpack简介 本部分对Webpack进行简要的介绍。 1.1 基本介绍 Webpack： ​ 一种前端资源构建工具，一个静态模块打包器(module bundler)。 ​ 在webpack 看来, 前端的所有资源文件(js/jso
Webpack 2 视频教程 004 - Webpack 初体验
QDY5945的博客
10-18 97
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」。 Webpack 作为目前前端开发必备的框架，Webpack 发布了 2.0 版本，此视频就是基于 2.0 的版本讲...
Webpack 初体验
01-20
Webpack 是前端开发中的一款重要工具，它是一款模块打包器，主要负责将JavaScript、CSS、图片等资源文件进行处理和组织，以便在浏览器中高效运行。随着前端应用的复杂度日益增加，Webpack 的出现解决了手动管理依赖...
React入门挑战：ignite-template-reactjs初体验
React.js是由Facebook开发的一个用于构建用户界面的JavaScript库，由于其组件化、声明式和高效的更新渲染特性，成为了现代前端开发中非常流行的技术之一。 在标题中还提到了“TypeScript”，这是一种由微软开发的...
TypeScript入门教程：01-TypeScript初体验
资源摘要信息: "01-TypeScript初体验" TypeScript是微软开发的一种开源编程语言，它是JavaScript的超集，添加了可选的静态类型和基于类的面向对象编程。由于其与JavaScript的兼容性，TypeScript广泛应用于开发大型...
Cesium-Vue3整合Cesium最简教程
Apple_Coco的博客
07-02 5428
文章目录前言配置创建 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 2006
环境介绍 创建一个 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.
ES6知识点总结（一）
Apple_Coco的博客
05-26 623
let 和 const 关键字 let 关键字 const 关键字 变量的解构赋值 对象的解构赋值 数组的解构赋值 模板字符串 简化的对象写法 箭头函数 let 和 const 关键字 let 关键字 作用 let 与 var 类似，用于声明一个变量 特点： 在块作用域中有效 不能重复声明 不会预处理，不存在变量提升 应用： 循环遍历加监听 使用let取代var是趋势 // 报错：age is not defined // console.log(age); let a.
ES5知识点总结
Apple_Coco的博客
05-26 567
前端-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
ES6知识点总结（三）
Apple_Coco的博客
05-29 459
iterator 接口机制 Generator 函数 对象的 Symbol.iterator 属性 Generator 应用案例 async 函数 async 应用案例 Class 机制 iterator 接口机制 概念 iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制 其工作原理和 C++ 的 iterator 很相似 作用 为各种数据结构，提供一个统一的、简便的访问接口 使得数据结构的成员能够按某种次序排列 ES6 创造了一种新的遍历命令 for…of 循环，Iter.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Apple_Coco

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

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

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

打赏作者

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

抵扣说明：

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

余额充值