webpack始出来

一直想好好整理一下webpack，现在就整理吧。

总结自己的实际搭建的整理情况，我还是要先对自己说一句，以后给文件夹起名字的时候不要用一些特殊的关键字，比如我在做这个demo的时候，我用的文件夹名称叫做“webpack”，然后npm的时候总是出错，因为不能在叫“webpack”这个名称的文件夹下面添加webpack，你应该起一些不会跟关键字重合的文件夹名称，后来我把文件夹名称“webpack”换成了“packdemo”，再运行的时候就一路顺畅了。

 

一、webpack之所以要出现，是为了解决js的历史遗留问题

之前我就说过，js的主要特点之一就是解释性，它的源代码不需要经过编译，就可以直接在浏览器运行时被解释。

但是，浏览器在解析js的时候有一个大盲点，就是js不具有模块化。也就是说，一个文件要给另一个文件暴露出去一部分数据，或者说一个变量，那么你就只能把这个变量定义在全局作用域下。除此之外，别无他法。

假设1号文件里有个变量，叫做message，2号文件想要用这个变量，那么，1号文件里的message就必须得是全局变量了，也就是写成：

var  window.message="定义在window下，成全局变量";

 

但是这样就带来了非常大的隐患，如果2号文件对message做了处理，用新的字符串将其覆盖掉，那么3号文件想要去拿这个变量的时候，message就不再是最开始的那个message了，她被玷污了！！啊，我的全局女神o(╥﹏╥)o

 

后来，node出现了。node就是用来在操作系统上运行js的。不过听上去也没什么特别的嘛，人家浏览器又不是不能运行js，but，node有一个很好的、但是浏览器没有的机制，那就是——他能把js给模块化。

现在大家往往会先把js转化为后端代码，然后再编译成前端代码。这种情况出现的原因，就是因为node。

 

在浏览器的模式下，一个文件想要共享一部分变量，就只能将这些变量写成全局变量。而在node下，只需要将这部分共享变量暴露出去就行了。比如下面这段代码：

var message="hello!"
var b=1;
module.exports={message:message};

 

module.exports就是node里面的代码，将message暴露出去。在node的眼里，所有的文件，都是一个模块。而任何一个模块，都会有两个口，一个叫出口，一个叫入口。有了 出口和入口的把控，这样，就不是任何人都能随便玷污文件里面的所有变量女神了，让你碰你才能碰，不让你碰你是碰不到的。

而这里的module.exports,就是该文件（或是说模块）的出水口。只有message可以共享，而变量b就不可以共享。

想要这个message的方法就是用require关键字，文件名不用加后缀，代码如下：

var msg=require('./不加后缀文件名').message;
console.log(msg);//hello！

 

在node环境下运行，就能看到msg的值了。但是，浏览器不知道这段代码是什么意思啊，光能node运行还不行啊，浏览器看不懂这两段代码，就会报错啊。所以，为了让浏览器看懂这些所谓的入水口、出水口、require关键词，webpack就这样金光闪闪地出现来拯救浏览器了。webpack的功能就是——动态地将这些后端代码编译成浏览器理解的代码，而这些被webpack打包编译出来的代码都被放在一个叫做 bundle.js 的文件里。

ε(┬┬﹏┬┬)3  webpack真好，浏览器不懂，他就能耐心地给他解释，有没有谁也能来出现拯救拯救技术这么菜的我啊，也能这么温柔就好了 ε(┬┬﹏┬┬)3

 

【webpack  入口文件名.js  bundle.js】：打包入口文件,出口文件为bundle.js，文件下面就会多了一个bundle.js。

（bundle.js这个文件名是大家常常起的，出口文件叫什么名字都行。）

 

二、webpack的安装与配置

由于webpack是跑在node环境下的，所以我们首先，就得先安装node。

安装完后，可以通过以下代码查看你安装的node版本或npm版本：

【node-v】：查看node版本。

【npm-v】:查看npm版本，

只要有版本显示，就说明你安装上了node环境，而npm是node自带的，接下来就可以安装webpack了。

【npm i webpack -g】:将webpack安装在全局作用域下，g代表global。如果安装在全局作用域下，在任何文件下都可以使用webpack命令。

但是把webpck安装在全局下呢，可能会有一个不小心出现的麻烦。项目是多人共同创造的，有的人可能会用不同版本的webpack，为了让这个项目里所有人用的webpack版本一致，可以先用【npm init --y】生成一个package.json文件，在这个文件下记录webpack的版本。

【npm i webpack -D】=【npm i webpack --save-dev】:局部安装，当前的文件夹下会生成一个node_module的文件夹，同时package.json文件里会显示安装的webpack的版本。

devDependencies：用于开发环境，不用于生产环境。

dependencies：需要发布到生产环境。

【webpack --v】:展示webpack的安装版本。

 

在安装wepack的过程中，我遇到了千奇百怪的错误。错误产生的原因主要有以下几个：

（1）webpack的版本导致的

现在是2019年6月19日，webpack最新版本是4.34.0。webpack版本只要是大于等于4的，必须要安装wepack-cli.应为webpack的各种命令都是在webpack-cli下面的。

而webpck和webpack-cli有各种版本，这两者之间还往往容易不兼容。他们不兼容就会导致错误。如果是自己的项目，为了避免不兼容导致的错误，就将这两者统一都安装成最新版本。

（2）webpack-cli安装位置导致的

 【npm install webpack-cli --save-dev】命令即使执行，但是由于该命令是将webpack-cli安装在了开发环境下，也就是局部安装，在命令行输入webpack命令的时候会发现仍然找不到webpack的命令。为了避免这个错误，需要将webpack-cli安装在全局下。

 

好了，现在webpack安装上了，那么现在，在本地怎么利用webpack呢？

首先，找到刚刚生成的node_module的文件夹，然后里面有个文件夹叫做.bin，也就是binary（二进制的，可执行的）的意思。打开这个叫做bin的文件夹，你会发现里面有个叫做webpack的文件。所以，使用代码如下：

【node_modules/.bin/webpack  入水口文件名.js  bundle.js】:打包出来。

（再说一遍：bundle.js这个文件名是大家常常起的，出口文件叫什么名字都行。(*๓´╰╯`๓)） 

但是上面这条命令的路径好长啊，所以，为了简化，在package.json文件里，找到script对象，添加一条自定义命令。记得自定义命令之间都要用逗号隔开。比如：

【"pack":"node_modules/.bin/webpack 入口文件名.js bundle.js】：其中，pack叫做键名。

好了，有了这条自定义命令，就可以在终端中使用了，【npm  run pack】，这样，就像开始那样，生成一个bundle.js文件了，在html页面里，只要在<script src='bundle.js' type="text/javascript">标签里引用bundle.js就行了。

但是，这条命令还能简化不？答案是当然可以，这就是webpack的配置。

webpack的配置就是那就是创建webpack.config.js的文件，把出水口和入水口统统都放到这个文件里，而不是把在package.json里面写语句。

 

创建webpack.config.js文件，然后创建module.exports等于一个对象，而这个对象里面，就可以指定webpack定义的一些参数了。代码如下：

webpack.exports={
entry:"./入口文件名.js",
output:{   //出水口要定义两个参数，文件名和地址
filename:"bundle.js",  
path:__dirname  //表示当前目录，dirname是node的一个特殊变量，解释为当前这个文件所在的目录
}
}

 

有了上面这段代码，package.json里面的pack语句把后面的两个文件名删掉就可以了，代码如下：

【“pack”：node_modules/.bin/webpack】

在终端下面跑一下【npm  run pack】，这样就可以了。

 

在webpack的配置文件里，往往会配置很多有用的东西。整个webpack的核心就是loader和插件，他们都是在webpack中进行配置的。

webpack的官方文档：

 

三、webpack的多入口与多出口

不同的页面都有js依赖，他们可能也有相同的js依赖，也可能有不同的js依赖。通过把出水口和入水口文件都放在对象里，就能避免总是重复写了。

在webpack.config.js文件下面配置文件的出水口和入水口。

webpack.exports={
    entry:{
        home:'./js/home.js',  //首页依赖的js文件
        signup:'./js/signup.js'  //注册页面用的js文件
    },
    output:{
        filename:'[name]+bundle.js',  //[name]是键名，也就是上面的入水口文件名，home和signup
        path:__dirname+'dist',  //默认都是放在dist文件夹下面。dist=distributable，可分发的。
    }

 配置了出水口和入水口之后，就可以在首页和注册页面中使用<script>标签中进行引用了。

 

 

四、webpack的配置

对于复杂的大包，可以在项目的根目录下提供一个配置文件，在这个配置文件中对打包过程进行详细的配置。

可以直接在命令行上输入【webpack】命令，也可以通过-config参数指定一个配置文件，如下：

【webpack -config wepack.config.build.js】:通过-config参数指定配置文件。