欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack 自动打包更新

程序员文章站 2024-03-24 19:03:46
...

目的:使用webpack自动打包

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

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

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

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

webpack 自动打包更新

 1-2初始化(项目名最好不好带中文,带中文下面的方法初始化会失败)

 webpack 自动打包更新

第二步:完成传统的打包

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

webpack 自动打包更新

 2-2:压缩main.js

 webpack 自动打包更新

 第三步:安装自动打包

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

webpack 自动打包更新

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

webpack 自动打包更新

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

webpack 自动打包更新

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

webpack 自动打包更新

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

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

> aaa@qq.com 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! aaa@qq.com dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aaa@qq.com 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

> aaa@qq.com 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! aaa@qq.com dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aaa@qq.com 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 aaa@qq.com --save-dev
| [0/1] Installing aaa@qq.com^3.0.0platform unsupported aaa@qq.com › aaa@qq.com › aaa@qq.com^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[aaa@qq.com^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 aaa@qq.com requires a peer of aaa@qq.com^2.2.0 || ^3.0.0 but aaa@qq.com was installed
peerDependencies WARNING aaa@qq.com › aaa@qq.com^1.11.0 requires a peer of aaa@qq.com^1.0.0 || ^2.0.0 || ^3.0.0 but aaa@qq.com 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

> aaa@qq.com 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\aaa@qq.com@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! aaa@qq.com dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the aaa@qq.com 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

webpack 自动打包更新

webpack 自动打包更新

3-7:测试

 webpack 自动打包更新

 webpack 自动打包更新

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

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

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

 

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

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