webpack安装与使用

webpack介绍：

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。webpack主要是针对打包整合开发文件，在系统运行的时候，需要进行统一打包成运行版本的工具。

开发时候，通常会将业务部分(main.js)和逻辑运算部分(calc.js)分开编写，实现明确的分工。此时两个部分分别写好之后，就可以用webpack进行打包。

一、先上node.js上下载node.js稳定版

二、一路next安装好node.js之后是这样子的（记得路径根据自己的需要来配置好）

三、window+R进入cmd命令行

输入命令：npm -v 查看版本号，看是否安装成功

四、安装nrm

输入命令npm install nrm -g

五、nrm命令：

① nrm ls　　// 查看所有的支持源（有*号的表示当前所使用的源,以下[name]表示源的名称）
② nrm use [name]　　// 将npm下载源切换成指定的源
③ nrm help　　// 查看nrm帮助

④ nrm home [name]　　// 跳转到指定源的官网

六、安装webpack

输入命令：npm install webpack@1.14.0 -g  （我这里安装的是1.14.0版本的webpack）

到此webpack安装成功

七、webpack命令

进入到要打包的文件夹的底下，shift+鼠标右键，进入到命令行

打包命令：webpack 入口文件.js 输出文件.js

打包成功（打包只需要打包一个js文件，webpack会将整个js文件所关联的其他js文件一起打包）

八、webpack配置文件的使用（webpack.config.js）

作用：可以将入口文件和输出文件的路径、文件名都配置起来，使将来在命令行面板中，输入webpack就可以实现打包，使命令在使用过程中变得更简单

通常，一个项目的结构会分为开发代码和打包以后的生成代码，开发的代码通常放在src文件夹中，打包以后生成代码通常放在dist文件夹张，如下图

所以calc.js与main.js这两个开发文件应该放入src文件夹中，之后在跟目录下创建webpack.config.js文件

webpack.config.js文件里面的内容：

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path: __dirname