visual code 下webpack打包

深藏阁楼爱情的钟 2022-11-22 00:16 74阅读 0赞

[https://blog.csdn.net/qq\_34665877/article/details/81018620][https_blog.csdn.net_qq_34665877_article_details_81018620]

前言:折腾了两天,折腾的有点伤心,以往的项目是站在大树地下使用框架自带的打包框架,当自己用webpack来实现自动打包的时候却发现,各种红~~~当自己把环境搭建好写出第一个demo的时候就发现这些过程都是很经验的积累吧.

第一步:

确保安装node.js,我的版本是v6.11.1

webpack版本4.16

第二步:

1:在电脑本机建立一个新文件夹.

2:打开vscode选择 文件>>打开文件夹.

3:CTRL+shift+y 选择终端输入npm init 然后执行.

4: 初始化后的文件夹,里面只有一个json文件.![70][]

5: 接下来装webpack ,命令 npm install webpack --save-dev

然后你就会发现多了 node\_modules 这个文件(大家注意这个文件目录,这是个坑)

![70 1][]

6:在这个文件下创建一个demo.js文件,并创建一个函数.

function hello() \{

alert( "老哥,了解下");

hello();

7:然后输入命令  webpack demo.js -o demo.bundle.js

其中 demo.dundle.js是打包后生成的文件的文件名(名字你随意...).

8:由于我用的webpack版本是最新版4.16,新版webpack4的语法更加严格,网上很多的教程都是很早的版本,基本都是炮灰.跑偏了,新版讲究个有开发模式和生产模式两种.我们找到开始 npm init 创建的package.json

"scripts": \{  
    "test": "echo \\"Error: no test specified\\" && exit 1",  
    "dev": "webpack --mode deveplopment",  
    "build": "webpack --mode production"

\},

然后把红色的两个属性添加上(dev:开发模式,build:生产模式)

区别:一个没压缩,一个压缩了.作用是啥:体积小和代码混淆

9:打包发现缺少webpack-cli就使用npm install --save-dev webpack-cli -g 全局安装.

10:然后继续打包发现还是出错:

原因是,你输入命令 npm run dev或者npm run build 的时候,会默认打包src文件夹下的index.js文件,打包完成后是main.js文件(放在dist),你有没有发现我们一开始安装webpack的时候并没有这个文件生成,所以更别提什么index.js文件了,所以这些我们需要手动创建我们先创建src文件.还有一个dist文件,存放默认的打包生成的文件, 然后在src里再创建index.js文件.

11:创建好文件后我们再来一波如果打包还有黄色的警告请使用

npx webpack ./demo.js -o demo.bundle.js --mode development

上面这个命令.

打包后的代码

![70 2][]

这样,我们简单的配置就已经完成了!

![70 3][]

在浏览器上执行一次吧

12:如果想一边写,代码自动打包 使用这个命令 npx webpack --mode development --watch

注意: 这个命令只是单纯监听了默认的打包路径,也就是能监听到src下index.js的变化,也能够随将变化时进行保存刷新后其自动打包,但是,并不能监听到demo.js.  还有就是你的执行这个命令的时候,它必需属于一直监听的状态, 如果被停止了,那监听状态也停止.

[https_blog.csdn.net_qq_34665877_article_details_81018620]: https://blog.csdn.net/qq_34665877/article/details/81018620
[70]: /images/20221120/6d2b9b57f933491a9cecdfa97b1c57a0.png
[70 1]: /images/20221120/f80ef00419d3485ea461f7e0fc6f904f.png
[70 2]: /images/20221120/665823f7454e40b195e9911de7f5b563.png
[70 3]: https://img-blog.csdn.net/20180712172301587?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjY1ODc3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70