webpack 自动打包更新
目的:使用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
> 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
3-7:测试
因为我们前面配置了--open自动打开浏览器,所以启动 命令之后会自动打开。
至于index.html里面引用的js为什么是在根目录下:因为打包之后,会在内存中产生了一个bundle.js,更容易被访问。
总结:到这里就完成了webpack自动打包更新。 之后你启动了项目,然后修改了main.js直接 ctrl + s 保存,之后会自动打包,我们也不需要手动刷新页面,页面会自动刷新。
如果想了解一下,在内存中生成index.html模板页面插件,可以去看这篇博客。是接着这篇博客写的
上一篇: Python 杂记 博客分类: python python问题杂记
下一篇: 黑苹果安装与踩坑记