webpack打包文件

最新推荐文章于 2022-07-22 23:45:00 发布
最新推荐文章于 2022-07-22 23:45:00 发布
阅读量211 收藏
点赞数
分类专栏： 笔记 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45832807/article/details/105247864
版权
  1. 创建入口文件package.json
    npm init --yes
  2. 创建显示页面vue.html
    在这里插入图片描述
  3. 创建入口文件 main.js
    在这里插入图片描述
    在这里插入图片描述
  4. 通过webpack打包main.js，让main.js和app.js合成一个文件build.js
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
最后在浏览器中运行vue.html文件，打印输出
App.js模板中的内容
在这里插入图片描述

在使用webpack打包的时候会因为webpack版本的问题出现找不到文件的错误。在这里插入图片描述

HerayChen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用webpack打包编译TypeScript包括静态资源引入声明配置
小青蛙的博客
07-05 5198
使用webpack打包编译TypeScript 导读 TypeScript 是 JavaScript 的超集，为其增加了类型声明验证，可以编译为 JavaScript 代码。这篇博文里我们将会学习如何集成 webpack 跟 TypeScript。 项目地址：https://github.com/RiversCoder/webpack-test 安装ts开发依赖 cnpm install --D...
彻底解决 webpack 打包文件体积过大问题
08-30
彻底解决 webpack 打包文件体积过大问题 在使用 webpack 打包文件时，一个常见的问题是打包文件体积过大，影响网站的加载速度和用户体验。今天，我们将讨论如何从多个方面进行优化，从而彻底解决 webpack 打包文件...
webpack 打包文件
bobbykey的博客
09-10 385
使用webpack.config.js 对文件进行打包过程： 1、初始化当前文件夹： npm init 在安装过程中，package-name自定义文件包名称，其他直接回车即可 2、编辑webpack.config.js文件 const path = require('path') //从外部导入path包 module.export = { entry:'src/main.js', outpath:{ path: path.resolve(__dirname
Webpack4 创建项目以及打包一个JS文件
卡尔特斯
11-06 634
我在上一篇文章：【Webpack 安装】 已经搭建过环境了。 1、创建一个文件夹 webpack，通过命令行 cd 到该文件夹 $ cd /webpack 2、进行初始化，除了 package name 需要手动设置，其他都可以直接按回车就行了，后面自己在改也没事 $ npm init 注意在填写项目名称的时候，修改一下名字，默认是叫 webpack, 但是我们下一步需要依赖 webpack，会报错文字已存在，所以记得修改一下名字就行 package name: (webpack) dzm 3、安装
webpack按需打包资源（js、txt等）
qq_39548647的博客
06-30 360
seo优化、webpack打包
简单使用webpack打包文件的实现
10-16
在本文中，我们将探讨如何简单地使用 webpack 来打包文件。首先，确保你已经安装了 Node.js，因为 webpack 是基于 Node.js 的生态系统。如果没有安装，你需要先下载并安装它。 接下来，我们要安装 webpack。在...
vue+webpack 打包文件 404 页面空白的解决方法
08-27
"vue+webpack 打包文件 404 页面空白的解决方法" 在使用 Vue 和 Webpack 进行项目开发时，经常会遇到打包文件 404 页面空白的问题。这个问题的出现主要是因为 Vue 单页面的启动页面是 index.html，而路由的路径实际...
webpack打包项目文件
时漂亮的博客
10-18 347
webpack本质是一个第三方模块,用于分析并打包代码 支持所有类型的打包 支持less/sass=>css 支持ES6/7/8/9=>ES5 压缩代码,提高加载速度 作用: 识别代码 ,翻译,压缩,整合打包 目的:提高打开网站的速度 注意:不要将根目录的上级目录命名为webpack,否则系统会默认将上级目录座位根目录,后续会报错 安装webpack环境准备 初始化包环境 yarn init -y 安装依赖包 yarn add web
webpack怎么知道要打包哪些文件
weixin_44263363的博客
07-28 377
webpack会根据指定的入口文件（默认是src文件夹下的index.js，也可以修改webpack.config.js文件修改入口文件）找到导入(依赖)的一些文件，生成一个依赖关系图，这个依赖关系图会包含应用程序中所需要的所有模块（js,css，image等). 如果index.js导入了一个A.js这个文件，A.js导入了B.js文件，B这个文件也在依赖关系图里。 ...
把web项目打包成exe文件，一键安装
01-10
公司要求必须把WEB项目做成EXE文件，因为客户是不可能去装JDK，TOMCAT，MYSQL的，所以我必须做成一个可执行文件，并初始化录入一些数据。 里面讲到了如何做tomcat和mysql的免安装方法还有环境变量的增加、修改和删除。系统服务的注册和删除等内容。
webpack打包文件过程
Coco_998的博客
10-09 1412
webpack打包 1)安装webpack      $ npm install webpack webpack-cli --save-dev 2)添加配置文件  webpack.config.js 3) 为package.json添加脚本                 项目信息                 依赖信息                     产品依赖 --save ...
2、webpack配置文件之—打包各种资源及文件
BWater_monster的博客
02-17 1303
webpack配置文件之—打包各种资源及文件
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 2213
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
Webpack(01)-打包各类资源
weixin_47723644的博客
10-28 674
webpackwebpack五大模块webpack的使用 webpack五大模块 entry: 打包入口文件，入口文件引用了a文件和b文件，a、b文件又引用了其他文件，这样一层层调用，会将项目中用到的文件生成一个树状的结构图。 output： 打包资源输出位置，指定打包好的资源输出到哪里，如何命名 loader： webpack只能够处理js，json文件，css、img文件需要通过loader翻译成可以处理的文件 plugin： 插件，可以做一些执行范围更广的任务，如代码压缩 mode： (1).de
webpack打包文件的基本使用
彭世瑜的博客
03-29 1178
一、webpack简单入门 1、webpack安装 # 安装webpack npm init -y npm install webpack webpack-cli --save-dev # 查看版本 ./node_modules/.bin/webpack -v 4.42.1 2、准备要打包的文件 src/hellowebpack.js export function hellowebpack(...
webpack打包参考文档
aliven1的博客
11-13 196
http://webpack.wuhaolin.cn/
webpack的使用（样式打包，文件打包）
LQ的博客
03-30 1127
（一）webpack.config中的配置const path = require('path'); //node内置模块用来设置路径的 module.exports = { //单个入口文件的配置 --- 对应单页面应用程序 // entry: './src/js/main.js', //文件入口 // output: { //文件出口...
webpack工具如何打包文件--基本配置和初体验
JCat的博客
10-26 955
1. 在网页中会引用哪些常见的静态资源？ 样式表 .css/.less/.scss JS文件 .js/.ts 图片 .jpg/.jpeg/.png/.gif/.bmp/.svg/.webp 字体文件 .eot/.ttf/.woff/.woff2/.svg 模板文件 .vue/.jsx 2. 网页中引入的静态资源多了以后有什么问题？？？ **对网页性能不友好：**...
webpack打包文件压缩
最新发布
09-12
webpack打包文件压缩可以通过使用一些插件来实现。下面是两个常用的插件： 1. UglifyJsPlugin：通过压缩和混淆 JavaScript 代码来减小文件体积。 在 webpack 的配置文件中引入该插件，并将其添加到插件列表中，示例如下： ```javascript const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { // ... optimization: { minimizer: [ new UglifyJsPlugin({ // 在此处添加相关配置 }), ], }, }; ``` 2. OptimizeCssAssetsWebpackPlugin：用于压缩 CSS 文件。 同样，在 webpack 的配置文件中引入该插件，并添加到插件列表中，示例如下： ```javascript const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { // ... optimization: { minimizer: [ new OptimizeCssAssetsWebpackPlugin({ // 在此处添加相关配置 }), ], }, }; ``` 这些插件可以通过配置不同的选项来满足你的需求，例如设置压缩级别、保留注释、排除某些文件等。具体的配置选项可以根据文档进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值