使用VsCode进行webpack打包

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

第一步:

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

webpack版本4.16

第二步:

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

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

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

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

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

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

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

上面这个命令.

打包后的代码

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

在浏览器上执行一次吧

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

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

如果还有不清楚的,就给我留言吧,我看到就回复~~~