windows webpack 安装使用

对于自己写前端知识的说明，前面面试的时候有人问我，我的博客里面前端后端都在做，是不是打算做全栈开发，实际上我并不打算做全栈，我一直是Java开发为主的程序员，之所以学习前端，主要是自己不会，想做一些简单的功能交互，对前端比较好奇，本着借鉴吸收的目的在学习，有兴趣一起讨论的欢迎探讨啊。

🎨/为什么需要webpack打包？

为啥要用webpack呢？什么是webpack？

1、压缩代码

就是打包工具，webpack作为前端专业的打包工具，可以把模块抽离，打包到一个文件里面去，这样你就不需要导入整个的库包来影响你的页面加载了。

2、支持新语法,优化代码

而且还可以分析优化你的代码哦，强力点在于甚至可以支持一些新的语法，只要使用对应的打包方式就能够兼容你想要的浏览器，你的新语法打包的时候会自动转化为旧语法的同样的实现效果，比如循环的实现方式。

3、保护源代码,提高技术壁垒

最重要的是，可以对源码压缩转义，打包压缩之后的js文件是一行代码，一方面减少了文件大小，另一方面也提高了别人抄袭你的代码的成本，他将无法很明显的理解你的代码的含义，这样提高了前端技术的壁垒，保证了技术的领先。

这和Java类似，Java的代码是非常容易破解的，编译后的.class文件并不安全，可以使用反编译编译出来，但是.class文件总比源代码泄露要好得多，增加了破解的难度，而且Java越来越倾向于做服务端，服务端的代码文件在服务器上，客户端是无法获取到的，这样才使得Java得以壮大发展，这就是防破解抄袭的重要性了。

但是前端的代码是可以通过浏览器直接查看的，因为浏览器要编译渲染页面，这是网页运行的基础，所以打包压缩是必要的发展过程和市场选择，当然还有一个原因是HTML设计的本来就是简单运行，很多实现的效果都是依赖js进行数据处理的，所以最笨的方法当然是操作dom来实现，所以你写的代码的实现效果实际上谁都能写，你要隐藏的只是你的高效的实现方式，以及你的一些加密处理。

🎉/ 安装webpack

手上就一台Windows，就安装Windows的环境吧，mac上安装应该更加的简单，也无需我的赘述。

参考菜鸟教程操作，安装webpack，为啥选择菜鸟教程，因为简单最快的使用它，先入门。

先下载window的软件包，下载需要一定的时间，你可以创建一个文件夹专门来放置你的开发需要用到的程序，我创建一个node的文件夹等下安装node

D:\Software\DevelopTools\node

下载下来的是.msi文件，直接打开。改变文件安装位置，其余的都默认就好。安装完就会有程序出现

在我们安装的目录打开cmd，执行node --version命令

可以发现我们已经可以使用node了

🎢/升级npm,使用cnpm

我们国内一般使用cnpm，因为npm是自带的，访问的地址是国外的，使用cnpm访问的是淘宝的镜像，所以更快。

首先我们先升级下自带的npm,install 安装 -g表示全局 global

npm install npm -g

然后我们安装cnpm,同样是参考菜鸟教程就能安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下来使用cnpm试试

cnpm -v

🎐/安装webpack和webpack-cli

安装我们需要的webpack

cnpm install webpack -g

下载速度起飞，我们打包一下试试，我之前就写了一点js文件，我直接切换到路径下试试

webpack min.js bundle.js

它提示需要安装webpack-cli，我直接输入yes让它安装，它执行的命令就是

npm install -D webpack-cli

当然我们也可以使用cnpm来安装，后面我发现安装失败了，那就直接使用cnpm安装，就是把npm前面加上c就好了，然后居然直接秒装。。。。，果然差距不是一点点。

cnpm install -D webpack-cli -g

注意后面加上-g 表示全局安装，不然你安装完还是提示未安装。

🎗/最简单的webpack教程

下面我直接开始最简单的webpack打包教程

1、新建项目

在桌面上新建文件夹code,在文件夹里面新建src文件夹（和public文件夹，实际上public文件夹不参与打包）

src文件夹里面放置的就是js文件，public里面放的就是html文件

2、新建打包源文件

src下面新建js文件，index.js就是默认的打包js，当然你可以指定为其他名字，需要配置

本着约定大于配置的开发理念，直接使用index.js文件。

index里面的代码是非常简单的

code.js文件主要是测试是否引入。

3、初始化项目
打开这个src位置的cmd命令行，然后开始执行命令

初始化项目，必须，不然无法生成package.json文件，无法打包。

cnpm init -y

里面其实就是默认的打包配置，比如为啥叫做index.js，我们暂时不看内容。

4、打包
然后执行打包命令，出现警告，其实没关系，我们已经完成打包了

什么！真正操作的只要两步？我不信这么简单！

其实就是这么简单，当然前提是你安装node 、webpack以及webpack cli 才能顺利完成，而且最重要的是使用cnpm init -y初始化项目，生成package.json文件，当然其实你使用npm init -y也是一样的。

不信我们来看一看我们打包后的文件。

里面只有一个文件，因为我们没有指定打包后的名称，默认是main.js文件，当然这个也是可以配置的。

查看下代码，如愿以偿的实现了压缩代码，一行代码自己也看不太懂。

我们很明显的发现里面就包含了我们要打印的hello code.js代码，所以把index.html复制过来就可以使用了

当然我们也可以打包的时候自动把public下面的html文件都打包到dist下面，直接发布，就不需要再手动复制一遍，但是既然要做最简单的webpack演示，更复杂的功能可以留到后面有时间再讲，实现我们的打包的目标才是主要的。

学会了么？快动手试试，不会的可以在下面留言。如果怕忘记了，可以点赞关注一下，下次更好找，更多干货实践只有你关注了才知道。

（日常偷图 -。- 侵删）