webpack -- 完整入门学习笔记（三）

一、HtmlWebpackPlugin

经过上面一番折腾，我们发现，虽然输出了内容，但是都是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值，默认是false
inject1、true或者body：所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
compile
favicon添加特定的 favicon 路径到输出的 HTML 文件中
minify传递 html-minifier 选项给 minify 输出，false就是不使用html压缩，minify具体配置参数请点击html-minifier
cache默认true； 如果为true表示在对应的thunk文件修改后就会emit文件
showErrors是否将错误信息输出到html页面中，默认为true
chunks允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk
excludeChunks这个与chunks配置项正好相反，用来配置不允许注入的thunk
title生成的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'
    })

最终的效果图：

二、CleanWebpackPlugin

经过上面的一系列操作，我们都运行了十多次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启用删除文件，默认是false
verbose开启在控制台的信息，默认是false
cleanStaleWebpackAssets字面意思就是在重新构建前删除所有未使用的webpack资产，默认true
protectWebpackAssets字面意思就是保护当前的webpack资产，默认true
cleanOnceBeforeBuildPatterns在Webpack编译之前删除一次文件，不包括在重建中（监视模式），默认：['** / *']，如果是空数组，表示禁用
cleanAfterEveryBuildPatterns在每个与此模式匹配的构建（包括监视模式）后删除文件，用于不是由Webpack直接创建的文件，默认：禁用
dangerouslyAllowCleanPatternsOutsideProject需要明确设置干选项，默认值：false
!这个感叹号是表示负面模式，用来排除文件的

三、CopyWebpackPlugin

拷贝插件，这个就是直接将你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强制覆盖先前的插件，可选，默认false
contextcontext可用specific，context，可选，默认base
flatten只拷贝文件不管文件夹，默认是false
ignore忽略拷贝指定的文件，可以用模糊匹配