webpack如何将某个目录输出到构建目录下（默认是dist目录

学习webpack知道如何打包js、css、html等文件，图标处理可以利用url-babel加载器。但是有些文件，比如img文件夹中放了很多图片，html引用图片打包后总是会出现路径找不到的问题。想着能不能直接将img文件夹输出到dist中，然后控制img文件夹位置相对html保持原来的相对位置，这样打包后html的引用图片的路径还是相对路径。

插件 CopyWebpackPlugin

将单个文件或整个目录复制到构建目录。

安装：npm install copy-webpack-plugin -D

文件目录如图：

想把img整个目录复制到构建目录dist下并保持img目录与html文件的相对位置一样。

配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

plugins: [
        //-------------------------------复制文件夹到dist目录下---------------
        new CopyWebpackPlugin([
            {from: path.join(__dirname, 'src/img'),to: path.join(__dirname, 'dist/img')}
        ])
]