webpack处理打包样式资源、图片资源、html资源以及其他资源

webpack处理打包样式资源、图片资源、html资源以及其他资源

我们都知道webpack只能处理js/json文件，不能处理css/img等其他资源，但是我们在开发过程中还需要用到样式资源、图片资源、字体资源等，那我们就需要学习他们的打包方式。

转换思路：我们知道webpack种有五个核心概念，入口、出口、转换器、插件、模式，我们可以通过loader转换器将webpack不能打包的资源进行打包。

我们通过在webpack.config.js（webpack配置文件）中配置loader转换器，也就是指示webpack干哪些活，当你运行webpack指令时，会加载里面的配置。

需要注意的是：我们在项目中使用的是ES6模块化，而在webpack配置文件中我们使用的是commonjs模块化。

既然了解了这么多接下来就让我们用实例来配置一下吧！

//resolve用来拼接绝对路径的方法

const {
   resolve} = require（‘path’）；
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   

​