如何用Vue的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等都可以叫包 

                npm难学吗？别害怕非常简单，3分钟就能学会常用命令即可。

        

        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');的结果。