webpack 自动打包更新

最新推荐文章于 2024-04-19 08:54:56 发布
最新推荐文章于 2024-04-19 08:54:56 发布
阅读量3k 收藏 5
点赞数
分类专栏： # WebPack 文章标签： webpack 自动打包 webpack 自动打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tomwildboar/article/details/82141824
版权

目的：使用webpack自动打包

如果你还没有安装webpack --> https://blog.csdn.net/Tomwildboar/article/details/81940522

我项目中的图标，是因为安装了一个插件，自行百度。  使用的工具是vscode

 第一步：打开终端初始化项目

1-1创建一个空的文件夹并打开

 1-2初始化（项目名最好不好带中文，带中文下面的方法初始化会失败）

 

第二步：完成传统的打包

 2-1：创建以下目录结构

 2-2：压缩main.js

 

 第三步：安装自动打包

3-1：安装 webpack-dev-server (命令 ： cnpm i webpack-dev-server -D)

3-2:webpack-dev-server需要依赖项目中的webpack

 3-3：创建并配置webpack.config.js

var path = require('path')

//当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供要打包的文件的入口和出口
//此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿出了导出的这个 配置对象 ，然后根据这个对象，进行打包构建
module.exports = {
    entry:path.join(__dirname,'./src/main.js'), // 入口文件
    output:{ //指定输出选项
        path:path.join(__dirname,'./dist'), //输出路径
        filename:'bundle.js'  //指定输出文件的名称

    }
}

 3-4：配置package.json

 3-5:启动项目。  npm run dev

在启动的时候出现了下面种种错误解决办法 -->https://blog.csdn.net/Tomwildboar/article/details/82143376

> webpack-study02@1.0.0 dev F:\java学习\代码笔记\前端代码\webpack\webpack-study02
> webpack-dev-server --open --port 3000 --contentBase src --hot

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\java学习\代码笔记\前端代码\webpack\webpack-study02\node_modules\webpack-dev-server\bin\webpack-dev-server.js:78:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-study02@1.0.0 dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-study02@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Asus\AppData\Roaming\npm-cache\_logs\2018-08-28T02_05_58_372Z-debug.log
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02> cnpm uninstall -g webpack-dev-server
up to date in 0.049s
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02>
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02>
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02> npm run dev

> webpack-study02@1.0.0 dev F:\java学习\代码笔记\前端代码\webpack\webpack-study02
> webpack-dev-server --open --port 3000 --contentBase src --hot

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\java学习\代码笔记\前端代码\webpack\webpack-study02\node_modules\webpack-dev-server\bin\webpack-dev-server.js:78:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-study02@1.0.0 dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-study02@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Asus\AppData\Roaming\npm-cache\_logs\2018-08-28T02_07_22_246Z-debug.log
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02> cnpm install webpack-dev-server@2.9.7 --save-dev
| [0/1] Installing camelcase@^3.0.0platform unsupported webpack-dev-server@2.9.7 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 260 latest versions
√ Run 0 scripts
peerDependencies WARNING webpack-dev-server@2.9.7 requires a peer of webpack@^2.2.0 || ^3.0.0 but webpack@4.17.1 was installed
peerDependencies WARNING webpack-dev-server@2.9.7 › webpack-dev-middleware@^1.11.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but webpack@4.17.1 was installed
Recently updated (since 2018-08-21): 4 packages (detail see file F:\java学习\代码笔记\前端代码\webpack\webpack-study02\node_modules\.recently_updates.txt)
√ All packages installed (279 packages installed from npm registry, used 12s(network 12s), speed 239.97kB/s, json 262(2.12MB), tarball 706.87kB)
PS F:\java学习\代码笔记\前端代码\webpack\webpack-study02> npm run dev

> webpack-study02@1.0.0 dev F:\java学习\代码笔记\前端代码\webpack\webpack-study02
> webpack-dev-server --open --port 3000 --contentBase src --hot

module.js:549
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\java学习\代码笔记\前端代码\webpack\webpack-study02\node_modules\_webpack-dev-server@2.9.7@webpack-dev-server\bin\webpack-dev-server.js:54:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-study02@1.0.0 dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-study02@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Asus\AppData\Roaming\npm-cache\_logs\2018-08-28T02_08_24_697Z-debug.log

3-6:填写index.html 和 main.js

3-7:测试

 

 

 因为我们前面配置了--open自动打开浏览器，所以启动 命令之后会自动打开。

 至于index.html里面引用的js为什么是在根目录下：因为打包之后，会在内存中产生了一个bundle.js，更容易被访问。

 总结：到这里就完成了webpack自动打包更新。 之后你启动了项目，然后修改了main.js直接     ctrl + s   保存，之后会自动打包，我们也不需要手动刷新页面，页面会自动刷新。

 

如果想了解一下，在内存中生成index.html模板页面插件，可以去看这篇博客。是接着这篇博客写的

https://blog.csdn.net/Tomwildboar/article/details/82143939

小道仙97
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack热更新，打包html、css、less、sass
CQcaoqian的博客
06-21 216
一、创建文件夹目录src1、src/index.html
Webpack插件使用及热更新打包
彭世瑜的博客
03-29 1686
1、HtmlWebpackPlugin 自动生成基本的 html 页面 2、开启文件监听 3、webpack-dev-server热更新 安装依赖 cnpm i html-webpack-plugin webpack-dev-server -D 配置webpack.config.js 'use strict' const path = require('path'); const HtmlWeb...
webpack热更新原理详解
最新发布
曹定栓的博客
04-19 1607
Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新代码变动的模块，是 Webpack 内置的最有用的功能之一。
关于webpack升级和打包
Harrietjia的博客
11-02 298
webpack1.0升级（搭配的是vue） 首先要了解webpack每个配置的作用，主要参考下面的链接： https://www.cnblogs.com/libin-1/p/6596810.html https://www.jianshu.com/p/0bd6d0df79fb https://juejin.im/post/5bd9838df265da393c06033a 因为原本webp...
webpack自动打包
sky
03-22 306
场景：打包webpacktest02项目中的vue_01.html的js 一、一 开始的文件目录（红色被我抹掉的是后面安装或创建的）： 1、dist文件夹是用来存放打包后的js文件（build.js） 2、src文件夹是存放打包的js资源 main.js:(js代码， 我这里是vue) // main.js表示webpack程序开启的程序入口 // 先导入需要打包的文件 var {add} = ...
Webpack详解
李宥的博客
07-05 6316
- 静态模块打包工具 - 官网：[https://webpack.docschina.org/](https://webpack.docschina.org/) - 官网文档：https://webpack.docschina.org/concepts/
webpack自动打包和热更新的实现方法
10-16
主要介绍了webpack自动打包和热更新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack打包Ts简易搭建
06-29
- 开发环境中，通常使用 `npm run dev` 运行Webpack Dev Server，提供实时反馈和热更新。 - 生产环境中，可以使用 `npm run build` 进行打包，通常会开启额外的优化，如代码压缩、去除冗余代码等。 通过以上步骤...
Webpack打包实例测试代码
03-28
Webpack 是一个现代JavaScript应用程序的静态模块打包工具。它在开发过程中扮演着重要角色，通过将各种资源（如JavaScript、CSS、图片等）转换并打包成更小、更优化的文件，提高了网页应用的加载速度和整体性能。在...
详解webpack打包nodejs项目(前端代码)
10-18
4. **插件（Plugins）**：扩展 Webpack 功能，例如 `HtmlWebpackPlugin` 可以自动创建 HTML 文件并插入打包后的 JavaScript 文件。 5. **模块（Modules）**：Webpack 把所有资源都视为模块处理，可以设置模块的解析...
Docker 将webpack打包的前端资源文件结合Nginx制作镜像
Crazy Snail
08-06 1163
1.antdesign pro2.0版本，只有一个示例页面，显示一个简单的字符串 2.配置config.js文件，设置路径 3.执行npmrun build命令，将打包后的文件拷贝出来 4.下载nginx.conf配置文件，修改端口及路径，文件与上述文件夹放置在同一层目录 5.同一层目录下，新建Dockerfile文件，注意文件路径 FROM nginx:latest M...
详解webpack+gulp实现自动构建部署
12-12
webpack系列目录 webpack 系列 二：webpack 介绍&安装 webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack 系列 五：webpack Loaders 模块加载器 webpack 系列 六：前端项目模板-webpack+gulp实现自动构建部署 正文 本篇包含以下三点： 1.区分开发环境和生产环境 2.集成gulp 3.package.json 配置 前面主要介绍了webpack 的一些基础用法，该篇做一个整体介绍，如何集成gulp？如何应对多部署环境？
10.webpack-配置webpack的自动打包功能
weixin_45847120的博客
03-05 766
webpack webpack 可以打包项目用到的js和非js文件 但是每次修改 都需要手动执行打包命令 然后刷新浏览器页面 比较麻烦 webpack-dev-server 实现了项目自动打包功能 每次修改文件 会自动打包并生成 bundle.js (mian.js) 文件 然后刷新浏览器页面 1. 安装 webpack-dev-server npm i -D webpack-dev-server...
webpack 保存文件后自动打包_自动打包插件webpack-dev-server的安装、配置及使用
weixin_42398056的博客
12-23 616
1、介绍：webpack-dev-server插件可以实现Webpack的自动打包编译这样 就不需要每次修改完代码都重新手动输入webpack打包了2、安装：在项目的根路径下输入：cnpm i webpack-dev-server -D 将插件安装到项目的本地开发依赖中该工具的用法和webpack命令的用法完全一致 直接输入命令即可自动监听在项目中本地安装的webpack-dev-server无法...
vue中webpack的部分安装
weixin_44366185的博客
01-27 709
vue 简介 四个核心概念: 入口 输出 loaders (加载器) plugins (插件) webpack基本使用 webpack官方有两种用法: 终端使用(需要全局安装webpack) Node.js的配置文件(可以全局安装也可以在项目中安装) 以下是终端使用的方式, 学习阶段可以尝试一下: 全局安装webpack(不推荐) npm i webpack webpack-cli -g...
解决npm run dev错误，npm ERR! code ELIFECYCLE报错
热门推荐
一条吃软饭的软狗
08-28 7万+
用git bash运行npm run dev出现如下错误： 感觉配置没有问题，端口也没有占用。 这种情况不妨试试用cmd来执行npm run dev命令 在路径那输入cmd，然后回车，打开cmd窗口，再执行npm run dev 执行成功  ...
利用gulp自动完成配置"吐"给webpack执行
08-23 4189
webpack的入口 理论上我们对那些文件”需要成为入口文件“都要有一个基本的规则，目前我们零散的把我们的文件统统放到了src下面， 我们先整理一下 同时，这些js理，引入的css路径也要修改require('./../../css/index.css');1.下面我们要来试验如何用gulp来读取webpack的配置文件？ 先把webpack.config.js的入口为空// entry
Webpack 前端自动化部署项目至服务器（Vue）
qq_33907414的博客
03-16 2270
对于没有搭建Jenkins等自动化打包平台来说，平时部署前端项目流程是：先部署到测试环境ok后再发布到生产环境上，部署到测试环境用 xshell 连上服务器，然后用 xftp /winSCP连接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp/winSCP 上传到服务器上，整个流程感觉稍有繁琐，重复。 我们可以利用scp2自动化部署到静态文件服务器，从而实现自动化部...
webpack 自动打包
08-22
Webpack是一个现代化的前端构建工具，可以帮助我们自动打包项目代码。要实现Webpack的自动打包功能，可以通过以下步骤进行配置： 1. 安装Webpack和相关的插件： ``` npm install webpack webpack-cli --save-dev ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值