webpack打包基础

对于webpack打包的理解：webpack是实现模块化开发的工具，他能自动处理js之间的依赖关系，将多个js模块打包成一个小的js文件，通过引入这个打包后js脚本来实现你所需要的功能。它依赖于node环境以及它的包管理器。他的语法规范基于CommonJS。

下面总结一下思路步骤以作记录：

新建一个项目文件夹（这里我叫做webpackBundle）

进入到刚刚新建的文件夹（webpackBundle）中，webpack需要一个npm的配置说明文件，里边包含当前项目的项目名，版本，作者，脚本信息，依赖模块等等说明信息。只需要输入

npm init

初始化项目就能生成这个package.json文件。

安装webpack作为依赖包 .命令如下：

cnpm i webpack --save-dev

（这里使用的cnpm(npm的镜像，速度比npm快)），完成安装后会生成一个node_modules文件夹，里边包含所需要的各种依赖模块。

新建我们的项目文件以及结构如下：



我们先在hello.js里写一个模块：

module.exports=function(){
return "你好！webpack";
}

该模块返回字符串‘你好！webpack’。

6. 在index,js(入口文件)里引入这个js模块：

const hello = require('./hello.js');
document.querySelector("#demo").innerHTML=hello();

该js只是引用hello.js里的字符串，将#demo元素里添加这段文字。

7. 假定我们最后使用的js文件叫bundle.js，这时我们就要配置webpack打包的文件了，新建一个文件叫做

webpack.config.js（这个文件名字是webpack自己默认会查找的文件，当然你也可以自定义）在该文件中键入以下最基础的代码（基于CommonJS模块语法）：

module.exports = {
entry:  __dirname + "/app/index.js",//入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}

__dirname是node里的全局变量，就是当前项目的根目录地址

8. 现在回到项目根目录，运行打包命令

webpack

就会在public文件里生成一个bundle.js的文件

9. 此时你用浏览器打开index.html文件就能看到那个#demo的div里有“你好！webpack”这段文字

当然webpack还有很多功能，比如热打包，显示打包的详细信息等命令，默认配置文件的修改等等。以后慢慢深究