webpack4-生产环境代码+html-webpack-plugin
html-webpack-plugin 配置
title : 用于生成的 HTML 文件的标题。
filename : 用于生成的 HTML 文件的名称，默认是 index.html。你可以在这里指定子目录（例如:assets/admin.html）
template : 模板的路径。
inject : true | ‘head’ | ‘body’ | false 。把所有产出文件注入到给定的 template 或templateContent。当传入 true 或者 ‘body’ 时所有 javascript 资源将被放置在body 元素的底部，‘head’ 则会放在 head 元素内。
favicon : 给定的图标路径，可将其添加到输出 html 中。
meta : 配置 html 文件的 meta 值，可以配置移动端 meta 也可以配置 seo 优化相关 meta
minify : {…} | false 。传一个 html-minifier 插件的配置 object 来压缩输出。
hash : true | false。如果是 true ，会给所有包含的 scrip t和 css 添加一个唯一的 webpack 编译 hash 值。这对于缓存清除非常有用。
cache : true | false 。如果传入 true（默认），只有在文件变化时才 发送（emit）文件。
showErrors : true | false 。如果传入 true（默认），错误信息将写入 html 页面。
chunks : 只允许你添加chunks 。（例如：只有单元测试块 ）
chunksSortMode : 在 chunk 被插入到 html 之前，你可以控制它们的排序。允许的值 ‘none’ | ‘auto’ | ‘dependency’ | {function} 默认为‘auto’.
excludeChunks : 允许你跳过一些 chunks（例如，不要单元测试的 chunk）.
xhtml : true | false。如果是 true ，会兼容 xhtml 文件。
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, './src/index.html'),
minify:{
removeRedundantAttributes:true, // 删除多余的属性
collapseWhitespace:true, // 折叠空白区域
removeAttributeQuotes: true, // 移除属性的引号
removeComments: true, // 移除注释
collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如：readonly checked
},
title:'webpack-主页',
favicon:''
}),
示例
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
// 入口文件配置项
entry:{
app:[path.resolve(__dirname, 'src/index.js')],
},
// 输出文件配置项
output:{
path:path.resolve(__dirname,"dist"),
filename: 'js/[name].[chunkhash].js',
chunkFilename: 'js/[name].[chunkhash].js',
publicPath:""
},
// 开发工具
devtool: 'cheap-module-source-map',
// webpack4.x 环境配置项
mode:"production",
// 加载器 loader 配置项
module:{
rules:[
{
test: /\.(js|jsx)$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.resolve(__dirname, 'src')
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
],
exclude: /node_modules/
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
config: {
path: 'postcss.config.js'
}
}
},
{
loader: 'less-loader',
options: {
sourceMap: true,
}
}
]
},
{
test: /\.(png|jp?g|gif|svg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8192字节的图片打包成base 64图片
name:'images/[name].[hash:8].[ext]',
publicPath:''
}
}
]
},
{
// 文件依赖配置项——字体图标
test: /\.(woff|woff2|svg|eot|ttf)$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'fonts/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——音频
test: /\.(wav|mp3|ogg)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'audios/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
// 文件依赖配置项——视频
test: /\.(ogg|mpeg4|webm)?$/,
use: [{
loader: 'file-loader',
options: {
limit: 8192,
name: 'videos/[name].[ext]?[hash:8]',
publicPath:''
},
}],
}, {
test:/\.html$/,
use:[
{
loader:"html-loader",
options:{
attrs:["img:src","img:data-src"]
}
}
]
}
]
},
// webpack4.x 新增配置项
optimization: {
minimizer: [ // 用于配置 minimizers 和选项
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
// 插件配置项
plugins: [
new CleanWebpackPlugin(),
new webpack.HashedModuleIdsPlugin(),// 实现持久化缓存
new HtmlWebpackPlugin({
filename: 'index.html',// 输出文件的名称
template: path.resolve(__dirname, 'src/index.html'),// 模板文件的路径
title:'webpack-主页',// 配置生成页面的标题
minify:{
removeRedundantAttributes:true, // 删除多余的属性
collapseWhitespace:true, // 折叠空白区域
removeAttributeQuotes: true, // 移除属性的引号
removeComments: true, // 移除注释
collapseBooleanAttributes: true // 省略只有 boolean 值的属性值 例如：readonly checked
},
favicon:''
}),
new MiniCssExtractPlugin({
filename: "css/[name].[hash].css",
chunkFilename: "css/[name].[hash].css"
})
],
}