一看就懂之webpack基础配置

时间 2019-11-05

标签一看 webpack 基础配置繁體版

原文原文链接

一看就懂之webpack基础配置

1、webpack 简介

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。

简单说，webpack能够看作是一个模块打包机，主要做用就是: 分析你的项目结构，找到JavaScript模块以及一些浏览器不能直接运行的拓展语言(sass、less、typescript等)，而后将它们打包为合适的格式以供浏览器使用。

webpack主要实现的功能:javascript

代码转换(如: ES6转换ES五、sass和less转换为css等)
文件优化(如: 将模块内容进行压缩)
代码分割(如: 多页面应用公共模块的抽离、路由懒加载)
模块合并(如: 按照不一样的功能将多个模块合并为一个模块)
自动刷新(如: 启动本地服务，代码更新后进行自动刷新)
代码校验(如: 添加eslint进行代码规范检查)
自动发布(如: 应用打包完成后，自动发布)

2、webpack 安装

在webpack 3中，webpack自己和它的CLI之前都是在同一个包中的，但在第4版以后，已经将二者分开来更好地管理它们，因此安装webpack4以后的版本，要同时安装webpack和webpack-clicss

注意，安装webpack的时候， 必须进行本地安装才能生效，不然会报错，如:

可是全局安装了也有一个好处，那就是 能够在项目根目录下直接执行webpack便可完成项目的打包，若是没有进行全局安装，那么能够经过npx直接执行项目本地安装的模块，即 npx webpack也能够完成项目的打包。

3、webpack 基础配置

webpack是支持零配置的，即不须要配置文件便可完成打包，其默认入口文件为项目根目录下的src目录下的index.js文件，其默认出口为项目根目录下的dist目录的main.jshtml

若是没有给webpack添加配置文件，那么webpack的打包能力就会很是弱，webpack执行的时候默认会加载项目根目录下的webpack.config.js文件，注意， 该配置文件是一个js文件，而不是json文件，而且其是经过node去执行的，因此其彻底支持node语法，即node中能用的，在配置文件中均可以用

webpack配置文件必需要对外暴露一个对象，即经过module.exports进行对外暴露，其中的全部配置都必须写在这个对外暴露的对象中。

① context
context属性表示的是webpack的上下文目录，配置入口文件的时候，若是入口文件使用的是相对路径，那么就是相对于context所在的目录。java

context默认值为执行webpack命令时所在的当前工做目录，一般是在项目根目录下执行webpack命令，因此能够认为其值默认为项目根目录，因此若是入口文件路径写成相对路径，最好将context配置成context: path.resolve(__dirname)，以防止在非项目根目录下执行webpack命令时找不到入口文件路径而报错。

② entrynode

entry用于配置模块的入口文件，能够配置多个，webpack将从入口文件开始搜索以及递归解析全部入口文件依赖的模块，其是 必填的，若是配置文件中没有entry则会报错。entry的属性值能够是 表示路径的单个字符串， 也能够是数组，数组中的元素为入口文件的路径， 还能够是对象，对象的属性名为入口文件的chunk名，即打包后输出文件的名字，属性值为入口文件的路径。注意，入口文件的路径 能够是绝对路径， 也能够是相对路径，相对路径默认是以 配置文件中的context属性值表示的路径

module.exports = {
    entry: "./foo.js" // 属性值为一个表示路径的字符串
}

其输出结果文件取决于配置文件的output配置，若是output.filename没有配置，则默认输出为main.js,若是output.filename值为指定的名称，则输出结果为output.filename的属性值

module.exports = {
    entry: [ "./foo.js", "./bar.js"] // 属性值为一个数组
}

其输出结果文件也是取决于配置文件的output配置，只不过，其会将foo.js和bar.js一块儿打包输出为一个文件，若是output.filename没有配置，则默认输出为main.js,若是output.filename值为指定的名称，则输出结果为output.filename的属性值

module.exports = {
    entry: { // 属性值为一个对象
        a: "./src/bar.js",
        b: "./src/foo.js",
        c: "./src/index.js"
    }
}

其输出结果再也不取决于output.filename的配置，由于entry已经指定好了模块输出的chunk名，即会分别输出a.js、b.js和c.js三个文件，而且此时 output.filename属性值不能配置为一个固定名称的输出文件，由于 入口文件有多个，必然输出文件也会有多个

chunk和module的区别，两者都是表示模块，可是module能够看作是具备独立功能的小模块，即小块，也就是打包以前，程序员编写的一个一个的文件，每一个文件称为一个module；而chunk则能够看作是由多个小module打包成的大模块，即大块

③ output
output配置的是如何输出最终想要的代码，output是一个object。jquery

path: 用于配置打包后输出文件的本地存放目录，必须是绝对路径，固然也能够不配置，由于若是没有配置path，那么会自动在执行webpack命令时所在的目录下自动建立dist目录并将打包结果输出到dist目录下，与context的配置路径无关webpack

module.exports = {
    output: {
        path: path.resolve(__dirname, "./dist") // 必须是绝对路径
    }
}

filename: 用于配置输出文件的名称，若是只有一个输出文件，那么能够配置成静态不变的文件名，如:程序员

module.exports = {
    output: {
        filename: "bundle.js"
    }
}

可是，若是有多个chunk要输出时，即入口文件配置了多个时，那么filename就不能配置成静态不变的了，就必须借助模板和变量了，常见的两个变量，如:
[name]: 能够自动获取到入口文件配置的chunk名称；
[hash]: 能够自动生成hash值，hash值的长度是能够指定的，默认为20位；web

module.exports = {
    output: {
        filename: "[name][hash:8].js" // 以入口文件设置的chunk做为输出名，而且指定hash值为8位
    }
}

library和libraryTarget: 用于指定将模块的输出结果挂载到哪一个地方或者以什么样的方式导出库(模块输出结果)。两者一般要搭配一块儿使用。
libraryTarget一般用于指定以何种方式导出库，library一般用于指定接收库的名称。
咱们将入口的一个或多个js文件打包输出后的结果也是一个js文件，在没有配置library和libraryTarget的时候，这个输出的js文件中包含了一个匿名自执行函数, 即输出文件的执行结果没有被任何东西接收，咱们引入输出文件执行后不会获得任何结果。 如:正则表达式

(function(){
    console.log("foo");
    return "foo"; // 虽然有返回值，可是匿名自执行函数执行完毕后拿不到任何结果
})();
// 咱们以var 变量 的方式来接收函数的返回值
var foo = (function(){ // 匿名自执行函数执行完毕后就会将函数返回值保存到foo变量上
    console.log("foo");
    return "foo";
})();
console.log(`foo is ${foo}`);

打包后的输出文件的输出结果(导出结果)，就是入口文件的输出结果(导出结果)，即入口文件经过export、exports、module.exports等输出(导出)的结果

var: 将libraryTarget设置为var, 同时指定一个自定义的变量名来接收模块的输出，这个自定义的变量名就是library的属性值

module.exports = {
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist/"),
        libraryTarget: "var",
        library: "test"
    }
}

模块的输出结果将会赋值给test变量，其输出文件bundle.js内容大体以下:

var test = (function(modules){
    return result; // 返回值result将会被赋值给test变量 
})();

commonjs: 将libraryTarget设置为commonjs, 即经过commonjs规范导出，同时指定一个自定义的变量名来接收模块的输出，这个自定义的变量名就是library的属性值, 只不过这个自定义的变量名是exports的属性名，如:

module.exports = {
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist/"),
        libraryTarget: "commonjs",
        library: "test"
    }
}

模块的输出结果将会赋值给exports["test"]上，其输出文件bundle.js内容大体以下:

exports["test"] = (function(modules){
    return result; // 返回值result将会被赋值给exports["test"]
})();

commonjs2: 将libraryTarget设置为commonjs2，即经过commonjs2规范导出，此时library的配置将无心义，由于commonjs2的输出是固定的module.exports，因此不须要指定library了，如:

module.exports = {
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist/"),
        libraryTarget: "commonjs2"
    }
}

模块的输出结果将会被赋值到module.exports上，其输出文件bundle.js内容大体以下:

module.exports = (function(modules){
    return result; // 返回值result将会被赋值给module.exports
})();

commonjs和commonjs2的区别在于，commonjs只能使用exports进行导出，而commonjs2在commonjs的基础上增长了module.exports进行导出;

this: 将libraryTarget设置为this, 那么此时library配置的变量名将做为this的属性名来接收模块的导出结果，如:

module.exports = {
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist/"),
        libraryTarget: "this",
        library: "test"
    }
}

模块的输出结果将会被赋值到this["test"] 上，其输出文件bundle.js内容大体以下:

this["test"] = (function(modules){
    return result; // 返回值result将会被赋值给this["test"]
})();

同理libraryTarget的属性值还能够是window、global，这里就不一一列举了。

publicPath
publicPath用于配置打包资源发布到线上时服务器的url地址，打包完成后，html文件中若是引入了js、image、css等资源，那么都会在前面加上publicPath所表示的路径

module.exports = {
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist/"),
        publicPath: "http://www.lihb.com/"
    }
}

// index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <script type="text/javascript" src="http://www.lihb.com/index.js"></script></body>
</html>

4、webpack 打包输出后的内容分析

webpack打包输出后的结果默认是一个匿名自执行函数，匿名自执行函数传递的参数为一个对象，对象的属性名为入口文件的路径名，属性值为一个函数，函数体内部经过会执行eval()，eval()方法的参数为入口文件的内容字符串，而这个匿名自执行函数，内部有一个自定义的__webpack_require__方法，该方法须要传入入口文件的路径名做为参数，匿名自执行函数执行完成后会返回__webpack_require__的结果，而__webpack_require__()方法内部执行的时候，会首先建立一个module对象，module对象里面有exports属性，属性值为一个空的对象，用于接收入口文件的模块输出，如:

(function(modules) {
    function __webpack_require__(moduleId) { // 传入入口文件的路径
        var module = installedModules[moduleId] = { // 建立一个module对象
             i: moduleId,
             l: false,
             exports: {} // exports对象用于保存入口文件的导出结果
         };
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // 执行入口文件
        return module.exports; // 返回模块输出结果
    }
    return __webpack_require__(__webpack_require__.s = "./src/bar.js"); // 返回入口文件
})({
     "./src/bar.js": (function(module, exports) {
         eval("module.exports = \"bar\";");
     })
  });

因此无论入口文件是以ES6模块的方式输出仍是以commonjs模块的方式输出， 最终入口文件的模块输出结果都会被绑定到__webpack_require__方法中定义的module对象的exports属性上，只不过，若是是以commonjs的方式输出，那么 入口文件的输出结果将会直接替换掉__webpack_require__方法中定义的module对象的exports属性；若是是以ES6模块的方式输出，则是 在__webpack_require__方法中定义的module对象的exports属性值中添加一个default属性或者具体变量名来保存入口文件的输出。

5、webpack 本地服务器配置

为了更方便调试，咱们须要用到webpack的本地http服务器功能，要想使用webpack提供的Web服务器功能，咱们须要安装webpack-dev-server模块，webpack-dev-server会启动一个web服务器用于实现网页请求，也能够监听文件的变化自动刷新网页。

webpack-dev-server模块安装完成后，咱们能够在项目根目录下运行 npx webpack-dev-server,其和webpack命令同样，若是没有配置文件，则使用内置默认配置进行打包输出，若是有则使用配置文件中的配置，只不过其不会将打包结果输出到指定的目录中，由于webpack-dev-server会忽略配置文件中的output.path配置，其会将打包输出结果保存到内存中。 webpack-dev-server启动后会默认将启动devServer时所在的目录做为根目录，即执行npx webpack-dev-server命令时所在的目录。

webpack提供了一个devServer属性用于配置启动的服务器的一些参数，固然webpack自己是没法识别devServer属性配置的，只有经过webpack-dev-server去启动webpack时，devServer的配置才会生效。

module.exports = {
    devServer: {
        port: 3000, // 让devServer监听3000端口
        contentBase: "./dist", // 将当前项目的dist目录做为devServer的根目录
        progress: true, // 显示打包进度条
        compress: true // 是否启用Gzip压缩，默认为false
    }
}

webpackDevServer启动后， 默认会自动监听打包源文件的变化，若是修改了打包源文件，那么会自动从新打包到内存，而且会自动刷新浏览器，可是 自动刷新浏览器功能必须将target设置成web，不然自动刷新功能将会失效，好比target为node就没法起做用。

6、webpack 插件配置

在不使用插件的时候，webpack默认只能打包输出js文件，若是咱们想要输出其余格式的文件到输出目录中，那么咱们必须使用插件。webpack提供了一个plugins属性用于配置使用到的插件，其属性值为一个数组，数组中的元素为插件对象，一般插件都是一个类，咱们须要经过插件类来建立一个插件对象。
① html-webpack-plugin
该插件能够指定一个html文件，webpack会将该html文件打包输出到输出目录中，同时会将打包输出后的文件自动插入到该html文件中，即让该html文件自动引入打包后的js文件。

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html", // 要打包输出哪一个文件，可使用相对路径
            filename: "index.html", // 打包输出后该html文件的名称
            minify: {
                removeAttributeQuotes: true, // 去除html文件中的引号
                collapseWhitespace: true // 合并空格，即将html进行单行显示
            },
            hash: true // 向html文件中引入打包后的js时候带上hash值
        })
    ]
}

html插件中配置了hash为true, 是在引入打包后的js的时候带上hash值，如:

<script type="text/javascript" src="main.js?c7086a400fa368e84ad6"></script></body>

7、webpack 模块配置

webpack默认将全部格式的文件都当作模块进行处理，可是wepback默认只能处理js模块。若是在js中经过require引入了其余格式的模块(文件)，那么webpack就必须经过安装合适的模块加载器，才能正确解析对应的模块内容，webpack提供了一个module属性，用于进行模块解析器的配置，其属性值为一个对象，对象中有一个rules属性，其属性值为一个数组，数组中的元素为一个对象，该对象主要完成两件事，匹配对应格式的文件，而且使用对应模块加载器进行加载，匹配使用的是test属性，属性值为一个正则表达式，【使用】使用的是use属性，属性值能够是字符串也能够是数组，若是只有一个模块加载器的时候，可使用字符串的形式，若是有多个模块加载器的时候，那么就须要使用数组的形式，固然，若是模块加载器须要传递参数配置，那么能够将模块加载器写成对象的形式，经过loader属性指定模块加载器名称，经过options属性传递参数配置。

① 处理css样式，须要使用到css-loader和style-loader。
首先须要安装css-loader和style-loader。
css-loader必须同时和style-loader一块儿使用才能正确加载css文件，一个负责加载，一个负责插入。css-loader负责加载css, 即在js文件中可以经过require的方式引入css，即加载和解析css，同时支持在css文件中使用@ import的方式引入其余css文件，style-loader负责将加载并解析好的css文件插入到html文件中去，从名字能够看出其是在html文件中生成style标签来引入css文件，loader的执行顺序是从右向左，因此必须先加载而后再插入

好比，打包入口文件index.js中经过require的方式引入了一个index.js文件，即require("./index.css"),那么webpack须要进行以下配置:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/, // 匹配以.css结尾的文件
                use: [ // 并交给css-loader和style-loader进行处理
                    {
                        loader: "style-loader", // 以对象的形式配置loader
                        options: { // 经过options给loader传递参数
                            insertAt: 'top' // 默认为bottom, 将加载的css文件插入到head标签的最上面，即优先级最低，会被覆盖
                        }
                    },
                    "css-loader" // 直接以字符串的形式配置loader
                ]
            }
        ]
    }
}

打包输出后，会 将index.css中的内容放到<style>标签中，而且 将这个<style>标签自动插入到index.html文件的<head>标签的最底部，若是配置了insertAt: "top", 那么就会插入到<head>标签的最上面。

同理，咱们也能够出来sass，即scss文件，要处理scss文件，咱们须要安装sass-loader，而sass-loader须要配合node-sass一块儿使用，安装好sass-loader以后咱们只须要再添加一个rule，改为匹配.scss结尾的模块，处理sass和处理css都须要用到style-loader和css-loader，只不过处理sass还须要sass-loader，即须要用sass-loader将scss文件转换为css文件，在css-loader后加一个sass-loader便可。

8、webpack 样式的高级处理

① 抽离样式
咱们经过css-loader和style-loader处理css样式后是直接经过<style>标签将解析后样式插入到了html中，若是须要将css样式抽离成一个单独的css文件, 而且自动link进html文件中，那么就须要mini-css-extract-plugin这个插件。

首先安装mini-css-extract-plugin插件，而后建立插件对象，并进行相应的配置，主要就是filename，即 抽离出的css文件叫什么名字

module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/index.css", // 抽离出的css文件叫什么名字,前面可加路径
        })
    ]
}

filename属性值中能够添加上一个路径，实现css资源的分类输出，上面index.css文件就会输出到输出目录下的css目录下

插件安装配置好以后还不行，由于还要对loader进行相应的配置，以前css文件是经过了style-loader处理的，而style-loader会将样式经过<style>标签的方式插入到html文件中，因此必须先移除style-loader,而后使用mini-css-extract-plugin这个插件提供的loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/, // 匹配以.css结尾的文件
                use: [ // 并交给css-loader和MiniCssExtractPlugin的loader进行处理
                    MiniCssExtractPlugin.loader, // 将css进行抽离
                    "css-loader" // 直接以字符串的形式配置loader
                ]
            },
        ]
    }
}

② 压缩css
要想压缩css，那么须要用到optimize-css-assets-webpack-plugin插件，须要注意的是该插件并非配置到plugins属性中，而是配置到optimization属性中。

module.exports = {
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin({})], // 压缩css
    }
}

咱们能够经过修改mode为production来压缩咱们的js，可是当使用了optimize-css-assets-webpack-plugin插件后，那么js的压缩就会失效，咱们须要使用uglifyjs-webpack-plugin插件进行压缩，如:

module.exports = {
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({}), // 压缩css
            new UglifyjsWebpackPlugin({ //压缩js
                cache: true,
                parallel: true,
                sourceMap: true
            })
        ], 
    }
}

使用uglifyjs-webpack-plugin插件后，mode的切换仍然是生效的了。

9、webpack JS的高级处理

① 将ES6以上的高级语法特性转换ES5
Babel是一个JavaScript的编译器，能将ES6的代码转换为ES5的代码，咱们须要安装babel-loader来处理咱们js文件，而其须要配合@babel/core模块一块儿使用，还要告诉babel当前要转换的JS代码中使用了哪些新特性，即预设，咱们使用包含当前全部最新ES语法特性的预设便可，@babel/preset-env。

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader", // 使用babel-loader进行处理js文件
                        options: {
                            presets: ["@babel/preset-env"] // 用了最新的ES6语法预设
                        }
                    }
                ]
            }
        ]
    }
}

② 减小代码冗余
babel在转换ES6语法的时候，会使用一些由ES5编写的帮助函数来实现新语法的转换。好比转换class语法，就须要使用到classCallCheck()函数，若是多个文件中都使用到了Class语法，那么每一个文件都会被注入classCallCheck()辅助函数，代码就会变得很是冗余，经过引入@babel/babel-plugin-transform-runtime插件就能够在输出文件中经过require的方式引入一个公共的classCallCheck()辅助函数,而后全部文件一块儿使用便可减小代码的冗余。@babel/babel-plugin-transform-runtime插件须要配合@babel/runtime一块儿使用，由于babel-plugin-transform-runtime插件引入的帮助函数，都存放在@babel/runtime中

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader", // 使用babel-loader进行处理js文件
                        options: {
                            presets: ["@babel/preset-env"] // 用了最新的ES6语法预设
                            plugins: ["@babel/plugin-transform-runtime"] // 减小代码冗余插件
                        }
                    }
                ]
            }
        ]
    }
}

③ 转换新的ES6API
babel默认只能转换ES6的新语法，若是想要转换一下ES6的新功能(Promise)、新接口(数组的includes方法)等，那么须要使用到@babel/polyfill, 其工做原理是在全局对象或者内置对象中添加一下属性或者方法，其使用方式为: 一种是直接在js文件中require, 如: require("@babel/polyfill"); 另外一种是将"@babel/polyfill"做为入口文件一块儿打包成一个chunk，如:

module.exports = {
    entry: ['@babel/polyfill', "./src/index.js"] 
}

好比，使用了Promise，那么打包输出的文件中，能够看到 全局对象global被添加了一个Promise属性。

10、webpack 第三方模块的处理

① 若是咱们的项目中使用到了第三方模块，好比jquery，咱们直接在咱们的js模块中引入jquery，那么这个jquery只能在当前模块中使用，而没法暴露到全局变量window中，若是想要实现，自动将jquery暴露给全局变量，那么须要引入expose-loader，其能够做为内联loader直接在js中使用，也能够做为普通loader在配置文件中使用。
// index.js

import $ from "expose-loader?$!jquery";
console.log($);
console.log(window.$); // 能够获取到jquery

或者在配置文件中引入

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve("jquery"), // 若是require的时候引入了jquery
                use: "expose-loader?$" // 那么将$变量暴露到全局
            }
        ]
    }
}

expose-loader是将一个模块的输出暴露给全局变量( 不限于第三方模块，任何模块均可以)，可是 具体是暴露给window和global取决于配置文件中target的配置，若是是node则暴露给global，若是是web则暴露给window。

② 咱们也能够不直接在咱们的js文件中引入第三方模块，就可使用他们，能够经过webpack提供的providePlugin内置插件来实现，将第三方模块注入到每一个模块中，固然也能够是其余任何一个模块，如:

new webpack.ProvidePlugin({
            $: "jquery",
            foo: path.resolve(__dirname,"./src/foo.js") // 自定义模块必须是模块的绝对路径不然没法解析
        })

咱们就能够在任何一个模块中使用$和foo变量了，由于他们被注入到了全部模块中，可是全局变量中是没法访问到的

③ 以上两种方式第三方模块都会被打包输出到咱们的最终输出文件中，咱们一般是不但愿将第三方模块打包到咱们的输出文件中的，由于会咱们能够经过cdn的方式直接引入第三方模块，这个时候咱们就须要告诉webpack哪些模块不须要打包输出，而且用运行环境中的全局变量进行替换，须要用到webpack提供的externals配置，如:

module.exports = {
    externals: {
        "jquery": "jQuery" // 排除jquery模块打包，并用浏览器中的jQuery替换掉jquery
    }
}

此时虽然js模块中引入了jquery，可是也不会被打包到输出文件中，而且html模板文件中直接经过cdn引入了jQuery，因此全局变量中也能够直接访问到jQuery

11、webpack 图片的处理

webpack是将全部文件都当作模块进行处理的，因此图片也被认为是一个模块，须要经过require或者import进行引入加载才能被正确打包输出。
若是想要加载并解析图片模块，那么必须使用合适的loader，解析图片可使用file-loaer。如:

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/, 
                use: "file-loader" // 用file-loader解析图片模块
            }
        ]
    }
}

图片会被单独打包出来放在输出目录中，可是输出的图片名称会发生变化，以hash值做为图片文件名，若是在css文件中使用图片，不须要经过require的方式，能够直接经过url("图片路径")的方式，由于css-loader对url()进行了转换，会转换为require的方式

若是想在html文件中直接使用<img/> 标签引入图片，那么须要使用到html-withimg-loader来处理咱们的html文件，图片一样会被打包单独输出到输出目录中。

module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/, // 处理html文件
                use: {
                    loader: "html-withimg-loader",
                    options: {
                        min: false // 不去除html中的换行符
                    }
                }
            }
        ]
    }
}

若是想将图片打包成base64编码格式，那么须要使用到url-loader来处理咱们的图片，url-loader其实包含了file-loader的功能，由于其能够设置一个limit，限制图片的大小，只有图片的大小在limit范围内才会被打包为base64编码格式，超过limit则仍是单独打包图片到输出目录中

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/, 
                use: {
                    loader: "url-loader", // 用url-loader解析图片模块
                    options: {
                        limit: 200 * 1024, // 限制图片大小为200kb内才打包为base64编码格式
                        outputPath: "/img/", // 将图片打包输出到输出目录的img目录下
                        publicPath: "http://www.lihb.com/" // 仅仅给输出的图片资源添加资源服务器存放地址
                    }
                }
            }
        ]
    }
}

url-loader能够配置一个outputPath将图片输出到指定目录下面，实现资源的分类输出。还能够配置一个publicPath，在引入图片资源的时候添加上图片资源所在的服务器地址。