经过上面一番折腾，我们发现，虽然输出了内容，但是都是js文件，这个看不了，所以要想办法输出html文件，要想输出html文件，需要依赖插件html-webpack-plugin安装
npm install html-webpack-plugin --save-dev调用 安装完成后，还需要在plugins里面配置一下
const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin() ]运行项目 运行完成之后，能够发现在dist文件里面生成了一个index.html文件，然后我们打开这个文件，发现js的脚本并没有生效，打开控制台发现报错了 原因就是路径都是绝对路径，找不到，所以我们需要修改一下output里面publicPath为相对路径'./'即可 修改完成，在运行命令，发现就可以了
template模板文件，这个就是告诉webpack你要用哪个文件用作公共的html文件，执行插件后就会输出这个模板文件为index.html，正常我们在文件根目录创建一个index.html文件作为模板文件filename输出文件的名字，文件目录是相对于webpackConfig.output.path路径而言的，默认就是index.html，这个属性的值可以是个名字，也可以是一个文件路径，表示将生成的文件放入到那个位置，这个位置是相对于dist而言hash是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，默认是falseinject1、true或者body：所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false： 所有静态资源css和JavaScript都不会注入到模板文件中compilefavicon添加特定的 favicon 路径到输出的 HTML 文件中minify传递 html-minifier 选项给 minify 输出，false就是不使用html压缩，minify具体配置参数请点击html-minifiercache默认true； 如果为true表示在对应的thunk文件修改后就会emit文件showErrors是否将错误信息输出到html页面中，默认为truechunks允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunkexcludeChunks这个与chunks配置项正好相反，用来配置不允许注入的thunktitle生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值xhtml默认false；是否渲染link为自闭合的标签，true则为自闭合标签单页面配置案例
new HtmlWebpackPlugin({ template:"./index.html", filename: './index.html', title: 'Webpack App', chunks:["app"], inject:true, showErrors:true, hash:true, minify: false, favicon: "", })多页面配置案例 其实看上面的插件使用方法就知道了，所谓的多页面无非就是多new几个
plugins: [ new HtmlWebpackPlugin({ template: 'src/html/index.html', excludeChunks: ['list', 'detail'], chunks: ['index'], // 只允许entry里面的index模板插入到这个页面 }), new HtmlWebpackPlugin({ filename: 'list.html', template: 'src/html/list.html', thunks: ['app], // 只允许entry里面的app模板插入到这个页面 }), new HtmlWebpackPlugin({ filename: 'detail.html', template: 'src/html/detail.html', thunks: ['main'], // 只允许entry里面的main模板插入到这个页面 }) ][大佬模板使用经验]((https://www.cnblogs.com/wonyun/p/6030090.html)补充 刚才忘记配置index.html，这里补一下
new HtmlWebpackPlugin({ template: 'index.html', filename: 'index.html', title: 'Webpack Test', chunks: ['app'], showErrors: true, inject: true, favicon: './src/assets/images/logo.png' })最终的效果图：
经过上面的一系列操作，我们都运行了十多次build命令，但是发现一个问题，那就是dist里面打包的文件越来越多，之前打包的文件还保留着，这个并不是我们想要的， 所以我们需要每次打包前清除dist里面的内容，这个可以通过clean-webpack-plugin插件实现安装
npm install clean-webpack-plugin --save-dev调用
const CleanWebpackPlugin = require('clean-webpack-plugin') plugins: [ new CleanWebpackPlugin() ]按照上面这样配置就可以，就可以每次打包前都会删除dist里面的东西，翻阅很多网上的资料，不知道是不是都是复制粘贴同一个人的，所有的配置都是new CleanWebpackPlugin(['dist'])，而且官网也是这么配置的 但是我们按照这个配置，打包发现报错了，提示我们这个实例它只接受对象参数，不接受数组这玩意，所以肯定不是这么配置的clean-webpack-plugin官网 官网也是一个对象，里面有很多配置项官网配置
new CleanWebpackPlugin({ dry: true, verbose: true, cleanStaleWebpackAssets: false, protectWebpackAssets: false, cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'], cleanOnceBeforeBuildPatterns: [], cleanAfterEveryBuildPatterns: ['static*.*', '!static1.js'], dangerouslyAllowCleanPatternsOutsideProject: true, })参数说明dry启用删除文件，默认是falseverbose开启在控制台的信息，默认是falsecleanStaleWebpackAssets字面意思就是在重新构建前删除所有未使用的webpack资产，默认trueprotectWebpackAssets字面意思就是保护当前的webpack资产，默认truecleanOnceBeforeBuildPatterns在Webpack编译之前删除一次文件，不包括在重建中（监视模式），默认：['** / *']，如果是空数组，表示禁用cleanAfterEveryBuildPatterns在每个与此模式匹配的构建（包括监视模式）后删除文件，用于不是由Webpack直接创建的文件，默认：禁用dangerouslyAllowCleanPatternsOutsideProject需要明确设置干选项，默认值：false!这个感叹号是表示负面模式，用来排除文件的
拷贝插件，这个就是直接将你static文件夹里面的静态资源直接拷贝打包到dist文件里面，在webpack中拷贝文件和文件夹，需要copy-webpack-plugin插件安装
npm install copy-webpack-plugin --save-dev调用
const CopyWebpackPlugin = require('copy-webpack-plugin') plugins: [ new CopyWebpackPlugin([ { from: path.resolve(__dirname, 'src/assets/static'), to: path.resolve(__dirname, './dist/assets') } ]) ]copy-webpack-plugin官网 官网配置可以点击上面链接前往官网，这里只是大致介绍一下参数的功能作用：参数说明from要拷贝的静态资源路径目录to要拷贝到的路径目录toType要拷贝的类型，file，dir，template三种，默认是undefined，可选force强制覆盖先前的插件，可选，默认falsecontextcontext可用specific，context，可选，默认baseflatten只拷贝文件不管文件夹，默认是falseignore忽略拷贝指定的文件，可以用模糊匹配
转载于:https://www.cnblogs.com/zjh-study/p/10858315.html
相关资源：JAVA上百实例源码以及开源项目