webpack打包基础

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

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

1. 新建一个项目文件夹（这里我叫做webpackBundle）
2. 进入到刚刚新建的文件夹（webpackBundle）中，webpack需要一个npm的配置说明文件，里边包含当前项目的项目名，版本，作者，脚本信息，依赖模块等等说明信息。只需要输入npm init 初始化项目就能生成这个package.json文件。
3. 安装webpack作为依赖包 .命令如下：cnpm i webpack --save-dev （这里使用的cnpm(npm的镜像，速度比npm快)），完成安装后会生成一个node_modules文件夹，里边包含所需要的各种依赖模块。
4. 新建我们的项目文件以及结构如下：
   
5. 我们先在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还有很多功能，比如热打包，显示打包的详细信息等命令，默认配置文件的修改等等。以后慢慢深究