一、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值,默认是falseinject
1、true或者body:所有JavaScript资源插入到body元素的底部2、head: 所有JavaScript资源插入到head元素中3、false: 所有静态资源css和JavaScript都不会注入到模板文件中compile
favicon
添加特定的 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'
})
最终的效果图:
二、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
启用删除文件,默认是falseverbose
开启在控制台的信息,默认是falsecleanStaleWebpackAssets
字面意思就是在重新构建前删除所有未使用的webpack资产,默认trueprotectWebpackAssets
字面意思就是保护当前的webpack资产,默认truecleanOnceBeforeBuildPatterns
在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
强制覆盖先前的插件,可选,默认falsecontext
context可用specific,context,可选,默认baseflatten
只拷贝文件不管文件夹,默认是falseignore
忽略拷贝指定的文件,可以用模糊匹配