webpack的基本了解

2022-02-16 06:31:20

定义nodejs或者普通的js文件，模块的导入还是require，但是使用webpack打包的项目，可以使用import这种方式，默认会转换为require
如果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"
  },
```
webpack4以上是可以无配置直接使用的，这是因为webpack4以上有了一个默认配置，但是我们一般的项目都会自定义配置。
1. 默认配置时执行的命令： npx webpack
2. 使用自定义配置时执行的命令： npx webpack --config webpack.config.js (webpack.config.js是一个nodejs的文件，webpack有一个定义配置文件的规则
webpack会创建依赖图（denpendency graph），这个依赖图不单单是js文件，可以通过loader将非js文件也作为依赖图可识别的一个依赖。
处理css文件需要用到的loader: style-loader && css-loader

使用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());

webpack的基本了解

使用file-loader将图片转换成依赖图可以识别的依赖。

三种使用图片的情况，

在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());

在css中使用图片：url(‘./my-image.png‘) 这个时候，使用css-loader会包括图片的处理
```
// style.css
.hello {
    color: red;
    background: url(‘./run.jpg‘);
}
```
在html中使用图片：<img src="./my-image.png">,这个时候，使用html-loader会包括图片的处理

无论是file-loader，css-loader还是html-loader，处理图片的逻辑都是类似的，都是把图片添加到output的目录中，然后把js中，css中，html中遇到到图片的url修改为output目录中对应的路径。

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

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

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

webpack的基本了解

码农公寓

相关文章