前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

目的：  模块化开发，组件化开发，让代码符合开发规范，更高效

webpack作用：从pack，就知道这是包的意思，比较专业点叫做前端自动化打包构建工具，代码错误检查，预处理，文件合并（打包），代码压缩，

将各种文件包括es6de 文件转化成es5的可以被浏览器识别的文件。

webpack安装：

1.node下载安装，最好有git，可以利用git的命令行窗口。

node和webpack啥关系呢？为什么要求要有node环境？？？？

webpack官网安装说明：在开始之前，请确保安装了 Node.js 的最新版本

当然这是要求，你没有理由不按照官网命令来办。但是为甚呢？为什么webpack的运行是基于nodejs呢？是在哪一步呢？

可能是压缩打包？，并且在命令窗口里时不时的npm点东西，没有nodejs还真不行，因为npm就是在node里的,并且配置文件module.exports = { }也是nodejs的引入方式，由此可见，这个webpack一定是基于nodejs的

          2.全局安装webpack和webpack-cli：npm install webpack  webpack-cli  -g；很疑惑的一点是我不知道为什么需要全局安装。难道本地安装还不够吗？

3. 初始化项目：在项目文件夹的路径下，执行npm init，会出现 packge.json这个无比重要的配置文件

node_modules: 项目的依赖文件，很大，是真是的文件

pack-lock.json:依赖文件的路径版本。

package.json文件：记录了依赖devDependencies，node_modules和pack-lock.json两个文件都不必传，因为npm install 命令会自动的去找       pakege.json的依赖文件，去下载并生成新的node_modules和  pack-lock.json；

4.局部安装webpack 和webpack-cli；npm install webpack webpack-cli --save-dev   (简写成-d)；

5.设置webpack的出口、入口  、loader   和  插件；

人口：index.js;

出口：   默认是 dist/main.js，但必须注意：这要求是个对象：我直接干成字符串报了下面错误

output正确格式：   是一个对象：有path和filename两个属性；      dist文件夹可以自己创建，包括main.js

如果有多个入口多个出口，

最重要的设置之一：配置loader;

第一： 为什么要配置图片的loader？？？img为什么直接用不行，

webpack是一个打包器，天生只认识JavaScript，对之外的css，img，等一概都不认识，必须转换成。

看一句官方的原话：loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) _模块_，并且在 bundle 中引入这些依赖。

也有人说在webpack里，万物皆模块。

这就表明：在webpack里，想要显示图片，必须要用图片加载器，

。

    第二：设置output里的publicPath：

1. path 跟publicPath一样，都有表示输出路径的意思，但查了好多资料，我的结论是:

  publicPath表示js和html取静态文件的路径：官方的解释：

也就是说，publicPath是用于更新内嵌到文件里的url值。这个public如果不配，js和html找静态资源会找不到。

2.  publicPath  (1)可以设置相对路径，（和path不一样，path是绝对路径）;

(2)最好以 ‘/’ 结尾，是为了配合rules里的use里或者option的name属性与它对接。

 第三：图片两种加载器都可以实现加载图片：

  url-loader：可以将图片转为base64字符串，能更快的加载图片，但当图片很多，就需要加载一堆base64的编码字符串，

 file-loader: 一旦图片过大， 就需要使用file-loader加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片（？limit=XX）

或者 

 注意name:'[name].[ext]'这种写法

顺便设置一下mode吧，要不webpack老发出warning

webpack的基本配置：这个我老师跟我讲，必须手动会干