前端自动化构建工具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的基本配置：这个我老师跟我讲，必须手动会干