Vue初学25-webpack的基本使用

webpack是代码编译工具，可以实现代码的打包，其最大的特点是实现了前端模块化。webpack是依赖于node环境的，因此,使用之前需要安装node。node的较新版本中一般都自带了npm(node package manager)。

node的安装步骤可参照（经测试没有问题）：node安装步骤

前端使用webstorm，webpack在生成打包文件的时候，commonjs和es6的语法都支持，并且会自动处理依赖关系，转换语法。因此，前端写代码的时候可以采用模块化的语法。

举个简单的例子：

结构如下：src存放源文件，dist存放webpack打包后的文件。

在src中添加func.js,param.js,main.js

func.js定义了两个function，并采用commonjs的语法输出

function add(a,b)
{
    return a+b;
}
function mul(a,b)
{
    return a*b;
}
module.exports={
    add,
    mul
}

param.js定义几个变量，并采用es6的语法输出

export const name='zd';
export const sex='male';
export const age=20;

main.js中分别要引用func.js和param.js中变量和函数

//commonjs模块化规范
const {add,mul}= require('./func.js')
console.log(add(30,40));
console.log(mul(30,60));
//es6模块化规范
import {name,sex,age} from './param.js'
console.log('姓名：'+name+',年龄：'+age);

我的webpack的版本是3.6.0，在webstorm命令行中执行：webpack ./src/main.js ./dist/bundle.js  

./src/main.js是源文件路径，./dist/bundle.js是打包后生成的文件路径

生成成功后，只需要在index.html中引用bundle.js文件。

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

结果如下：