文章3：webpack（3）

备注：说明（第一次写的文章还没有写好就提交啦，这里我接着上篇文章继续写））
上编文章说道安装webpack的顺序不能改变
下面继续：

---

一：webpack的目录结构

• 附上本人webpackdemo01的代码
• 下面介绍此时如果安装成功之后的文件基本的目录结构
  

• 图片都不知道有没有显示出来（写的我一脸蒙）介绍目录结构

     -asset
      -dev
       -index.bundle.js
     -node_modules
     -src
      -index
       -config.json
       -greeter.js
       -index.js
     -views
      -index.html
     -package-lock.json
     -package.json
     -webpack.config.jsasset
      -dev
       -index.bundle.js
     -node_modules
     -src
      -index
       -config.json
       -greeter.js
       -index.js
     -views
      -index.html
     -package-lock.json
     -package.json
     -webpack.config.js
     //(以上就是基本目录结构)  

• 目录结构详解

  • 解释上方的目录结构

    • asset/dev:（出口文件地址）该目录是执行webpack打包后生成文件的项目，其中包含打包后图片，以及js文件
    • node_modules:模块依赖文件，本人经验分享，这个文件通常占用的内存比较大，通常可以将其放在当前目录的上一级或者根目录，但是在webpack里面只能放在与webpack.config.js同一级目录，否则找不到该文件，自己写node服务器的时候就可以放在上一层，具体自己也不太清楚，总之，放在该目录就对啦
    • src：（入口文件地址）放入每一个生成文件的入口地址，我在网上找了许多的目录结构，我觉得这个目前在我看来最好，比如说我们最后生成index.bundel.js文件，而入口文件index.js所有的依赖我们都放在index文件夹中，而且只放与index.js相关的依赖文件，更体现出模块化，当然肯定有更好的目录结构，还望告之
    • views：最后生成的视图（即HTML文件），里面只需引index.bundle,js文件即可，这种目录结构也是为webpack打包多页面设计的
    • package-lock.json:该文件存储的是所有依赖模块的文件名，只需要执行npm install 就可以为项目安装所需模块

    • package.json：基本配置（直接放图啦）
      

      //解释：注意
      "script":{
      "start":"webpack"
      }
      /*
      这条指令还是很好的，当你执行打包操作时，你只需npm start就可以进行打包操作啦，
      npm start是一个特殊指令，了解更多可以参考官方手册，如果是其他的指令，则需要
      使用 npm run [server/build/dev] 等，你还可以自定义其他的脚本（script）指令
      随你高兴 哈哈！！！
      */

    • webpack.config.js:(重要的目录)，后面这个目录会越来月丰富，内容越来越多，基本配置直接看图
      

      解释：图中包含配置了打包过程中入口文件与出口文件entry（入口），output（出口）entry可以是键-值对（形如："key":"value"）语法，也可以是对象语法(形如："key":{"key":"value"})，我这里直接使用对象语法，方便后面的多页面，注意：这里必须使用绝对路径，使用__dirname或者使用path对象。"filename"："[name].bundle.js"中的[name]会自动的替换entry中的index，也即最后生成的文件叫做index.bundle.js。"publicPath":""基础路径 后面介绍。

npm官方文档地址

二、webpack的基本使用步骤

1. 前言
       前面已经安装了webpack以及解释了webpackdemo的基本目录结构啦，下面就是使用webpack啦，最终的目的我们是生成一个index.bundle.js文件，然后引入html文件就可以啦
2. 执行操作
       npm start
       解释：该操作相当与执行了webpack这条命令，官方手册有好几种执行方式，但这种最简单，其他集中直接去参考webpack手册吧。webpack4.*都需要依赖webpack-cli模块，我也装啦。这里我遇到个问题。我将webpackdemo01完整的复制一份，当我在打开的时候，它又让我重新在装webpack，以及webpack-cli，后来我全局安装。发现还是不行，这不影响其他操作，只是我自己挖坑！！！
3. 生成文件
       执行完上面的操作，就会生成一个index.bundle.js文件在asset/dev/下，怎样引入
   直接上图

---

三、style-loader/css-style/file-loader的加入

1. 同时安装style-loader css-loader file-loader三项的命令

       cnpm i style-loader css-style file-loader --save-dev
       /*
       使用cnpm装模块更快，效果与npm一样，这是一个淘宝镜像npm（推荐使用）
       不知道file-loader可不可以跟这两个同时装，反正另外两个是可以的
       style-loader:
       css-loader:
       file-loader:
       */

---

四、webpack-dev-server的加入

五、未完待续