webpack 自动打包更新

版权声明：本文为博主原创文章，未经博主允许不得转载。 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

> [email protected] 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! [email protected] dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

> [email protected] 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! [email protected] dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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 [email protected] --save-dev
| [0/1] Installing camelcase@^3.0.0platform unsupported [email protected] › [email protected] › 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 [email protected] requires a peer of webpack@^2.2.0 || ^3.0.0 but [email protected] was installed
peerDependencies WARNING [email protected] › webpack-dev-middleware@^1.11.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but [email protected] 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

> [email protected] 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\[email protected]@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! [email protected] dev: `webpack-dev-server --open --port 3000 --contentBase src --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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