webpack的基本了解

1. 定义nodejs或者普通的js文件，模块的导入还是require，但是使用webpack打包的项目，可以使用import这种方式，默认会转换为require
2. 如果webpack是安装在项目中的，执行项目中的看执行命令（比如webpack，比如pkg包），一般有3中方式：
   1. 在命令行中：node_modules/.bin/webpack
   2. 在命令行中：npx webpack(npx是npm默认提供的执行项目中可执行命令的一个工具，本质上可以去寻找node_modules/.bin下面的包)
   3. 在package.json中的scripts字段：然后直接执行npm run-script build

        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "build": "webpack --config webpack.config.js"
        },

3. webpack4以上是可以无配置直接使用的，这是因为webpack4以上有了一个默认配置，但是我们一般的项目都会自定义配置。
   1. 默认配置时执行的命令： npx webpack
   2. 使用自定义配置时执行的命令： npx webpack --config webpack.config.js  (webpack.config.js是一个nodejs的文件，webpack有一个定义配置文件的规则
4. webpack会创建依赖图（denpendency graph），这个依赖图不单单是js文件，可以通过loader将非js文件也作为依赖图可识别的一个依赖。
5. 处理css文件需要用到的loader: style-loader && css-loader
6. 使用css的loader后，可以在js文件中直接使用import './style.css'；来导入css文件，（在js中导入css后，在运行时会把css放到html的head中，这和在html的head中直接导入css没有区别）

   // style.css
   .hello {
       color: red;
   }

   // index.js
   import _ from 'lodash';
   import './style.css';
   
   function component() {
       var element = document.createElement('div');
     
       // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
       element.innerHTML = _.join(['Hello', 'webpack'], ' ');
       // 这里的hello class就是来自style.css文件，这里只是为了演示如何在js中使用css，实际工作中不会这么做，实际工作中会直接在index.html的head中导入这个css文件，而不是在js中导入这个文件
       element.classList.add('hello');
     
       return element;
     }
     
   document.body.appendChild(component());

   

7. 使用file-loader将图片转换成依赖图可以识别的依赖。
8. 三种使用图片的情况，
   1. 在js中导入图片： import MyImage from './my-image.png';  这个时候，需要使用webpack的file-loader来处理

      // index.js
      import _ from 'lodash';
      import './style.css';
      import Icon from './run.jpg';
      function component() {
          var element = document.createElement('div');
        
          // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
          element.innerHTML = _.join(['Hello', 'webpack'], ' ');
          element.classList.add('hello');
        
          // 将图片添加中现在的div中
          const icon = new Image();
          icon.src = Icon;
          element.appendChild(icon);
          return element;
        }
        
      document.body.appendChild(component());

   2. 在css中使用图片：url('./my-image.png') 这个时候，使用css-loader会包括图片的处理

      // style.css
      .hello {
          color: red;
          background: url('./run.jpg');
      }

   3. 在html中使用图片：<img src="./my-image.png">,这个时候，使用html-loader会包括图片的处理
9. 无论是file-loader，css-loader还是html-loader，处理图片的逻辑都是类似的，都是把图片添加到output的目录中，然后把js中，css中，html中遇到到图片的url修改为output目录中对应的路径。

    

    可以看到，图片被单独放在了output中，并且名称也修改了。下面我们看看引用这个图片的地方

    

   js中使用到的图片路径会自动转换为output目录中图片的路径

    

    css中使用到的图片路径也同样会被自动转换为output目录中图片的路径。

10. webpack推荐单个图片的size应该限制在244kb，如果图片太大就会有性能问题，这里可以使用image-webpack-loader和url-loader来优化图片性能。
11. file-loader理论上可以加载任何文件，然后将其输出到output目录。url-loader的功能与file-loader类似，但是url-loader在文件低于限制大小时，会返回一个DataURL.
12. file-loader还可以用来加载字体。
13. 使用csv-loader来加载CSV文件，使用xml-loader来加载xml文件