Webpack

Webpack一个现代的js应用静态模块打包工具。

把浏览器不识别的文件，比如commonjs打包成浏览器可以识别的代码，并且处理模块间的依赖关系。

webpack安装

webpack依赖node环境安装各种依赖。

安装node时会自动安装npm(node packages manager)工具，帮助我们管理node下个各种包。

安装完node需要在全局安装webpack工具，也有必要在项目中安装局部webpack工具以保持团队webpack版本一致。

webpack配置相关版本：

安装node(版本>8.9)
查看node版本
node -v  

安装webpack
npm install webpack@3.6.0 -g    全局安装（在cmd中安装）
查看webpack版本
webpack --version

webpack的基本使用

此时使用的是全局webpack，自动处理各种模块间的依赖。

使用webpack 把src里面的文件打包到dist文件，index.html引入打包后的文件。

webpack ./src/main1.js ./dist/bundle.js

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

//main.js

var name = "zhz";
var age = 18;

function sum(num1,num2){
    console.log(num1+num2);
}

// 用commonJs导出
module.exports = {
    name,
    age,
    sum
}

//main1.js

// 用commonJs导入
var {name,age,sum} = require('./main.js')

console.log(name);
console.log(age);
sum(1,2)

webpack基本使用

Webpack

webpack安装

webpack的基本使用