01-WebPack快速入门

知识点一：WebPack是什么？

    webpack是一个前端打包构建工具，主要功能是可以把.js,.css,.vue,.jsx等文件打包压缩到一块及实现自动刷新提高开发效率  我们网站有index.css，common.css每次打开网页都会向服务器发出两次请求，如果打包到一块可以只请求一次即可减轻服务器负担。

    当然也不是所有东西都打包到一块就是最完美的，要根据实际情况合理选择解决方案。

知识点二：抓紧开始吧，先来个热身

    webpack需要node平台的支持，所以我们需要先了解node,不用担心，不需要掌握很多node知识，只需要5分钟足够了。

    1、下载安装node

               https://nodejs.org/en/

                或中文网下载都行

                http://nodejs.cn/download/

                  安装是傻瓜式的，下一步下一步就可以了。

    2、npm命令应用，npm是什么？

                我的理解、node平台下的js依赖包管理工具。(package manager for JavaScript)

                什么是包？

                软件集成包简称，或叫模块，框架，库，工具都可以叫包。就是别人开发的代码功能例如：jQuery,vue,webpack等                    都可以叫包。

    3、npm命令

        3-1    npm init功能：创建package.json文件

                    package.json是什么？请看package.json。

      

下面是一个最简单的package.json文件，只定义两项元数据：项目名称和项目版本。

                3-2 npm install 包名称  

                        功能：这样就可以安装包了，安装过程都是自动化的具体细节不用操心。

                        常带参数如下：

                        npm install -g/--save-dev/--save

                        -g代表全局安装

                        -save和save-dev可以省掉你手动修改package.json文件的步骤。

                        spm install module-name -save 自动把模块和版本号添加到dependencies部分

                        spm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

                        

                3-3 npm update 模块名称

                        功能：更新模块

                        

                3-4 npm uninstall 模块名称 

                        功能：卸载模块

        

        

步骤三：开始使用webpack

        npm install webpack  --save-dev

        安装后可以看到package.json里面多了以下内容

        {

                 其他省略

          "devDependencies": {

            "webpack": "^2.2.1"

          }

        }

        

步骤四：使用webpack来打包一个文件

        1、新建一个打包前js假设：list.js内容很简单就一个 

                alert('Mywebpack');

        

        2、新建一个打包后js文件：bundle.js,空文件，不建立也行，webpack会自动建立。

        

        3、新建一个index.html

                里面就一句话：引入打包后的js文件。

                <script src="bundle.js"></script>

                

        

        4、执行命令：

                webpack list.js  bundle.js

                意思是：把list.js打包放入bundle.js中

        

        5、运行index.html就可以看到，alert('Mywebpack');的结果。