webpack 自动打包更新

末蓝、 2022-05-15 09:34 263阅读 0赞

# 目的：使用webpack自动打包 #

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

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

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

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

![70][]

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

![70 1][]

## 第二步：完成传统的打包 ##

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

![70 2][]

** 2-2：压缩main.js**

![70 3][]

##  第三步：安装自动打包 ##

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

![70 4][]

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

![70 5][]

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

![70 6][]

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**

![70 7][]

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

在启动的时候出现了下面种种错误解决办法 -->[https://blog.csdn.net/Tomwildboar/article/details/82143376][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**

![70 8][]

![70 9][]

**3-7:测试**

![70 10][]

![70 11][]

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

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

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

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

[https://blog.csdn.net/Tomwildboar/article/details/82143939][https_blog.csdn.net_Tomwildboar_article_details_82143939]

[https_blog.csdn.net_Tomwildboar_article_details_81940522]: https://blog.csdn.net/Tomwildboar/article/details/81940522
[70]: /images/20220515/6aa25c46c79d44c2a205dc5f66b2ad98.png
[70 1]: /images/20220515/2d1de4fba17e49a8832ed8bfd3679746.png
[70 2]: /images/20220515/105d49b86c0844c0bfc5e424acc3aa86.png
[70 3]: /images/20220515/1eee85a804104f6b8f15c745fa810c41.png
[70 4]: /images/20220515/04de0906fbe04c2bbcc88c2cb3e007a5.png
[70 5]: /images/20220515/97accbd4a5d846c880adb68ab9f346c0.png
[70 6]: /images/20220515/623921797bdf40ed83dc0be796d39d2e.png
[70 7]: /images/20220515/d305d2ecf31a4537b4065d97a0507bd0.png
[https_blog.csdn.net_Tomwildboar_article_details_82143376]: https://blog.csdn.net/Tomwildboar/article/details/82143376
[70 8]: /images/20220515/a4999ae955ad459d8cd73f51535c0da1.png
[70 9]: /images/20220515/e31a2e38db8048ae9ff24c19b447dbd5.png
[70 10]: /images/20220515/76c8b4f81cc249ff85bc56bcaadea7f0.png
[70 11]: /images/20220515/cb837a1207fb47aaaf6ea2265197dae4.png
[https_blog.csdn.net_Tomwildboar_article_details_82143939]: https://blog.csdn.net/Tomwildboar/article/details/82143939