03webpack的Html插件

时间 2020-07-03

原文原文链接

插件

webpack-dev-server插件

安装webpack-dev-server
npm install webpack-dev-server -D
运行webpack-dev-server
npx webpack-dev-server
该命令不会真的会去打包文件，只是把这种文件写到内存中（内存中的打包）
开发服务器配置（在webpack.config.js中配置）

devServer: { // 开发服务器的配置
    port: 3000, // 端口
    progress: true, // 在内存打包时候看到进度条
    contentBase: './build', // 找到当前的文件夹
    compress: true
},

经过配置package.json文件运行
用npm run build执行打包了，npm run dev直接运行

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
},

webpack-dev-server详细配置

devServer: { // 开发服务器的配置
    port: 3000, // 指定要监听请求的端口号
    progress: true, // 在内存打包时候看到进度条
    contentBase: path.join(__dirname, ",/build"), // 默认状况下，将使用当前工做目录做为提供内容的目录，可是你能够修改成其余目录
    // [path.join(__dirname, "public"), path.join(__dirname, "assets")]
    compress: true, // 启用gzip 压缩
    clientLogLevel: "info", // 可能的值有 none, error, warning 或者 info（默认值）
    headers: { // 在全部请求中添加首部内容：
        "X-Custom-Foo": "bar"
    },
	lazy: true,//当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)
	filename: "bundle.js",//在惰性模式中，此选项可减小编译。 默认在惰性模式，每一个请求结果都会产生全新的编译
	headers: { // 在全部请求中添加首部内容：
	  "X-Custom-Foo": "bar"
	},
	historyApiFallback: {Boolean|Object},
	host: "127.0.0.1" //指定使用一个 host。默认是 localhost
	hot: {Boolean}, //启用 webpack 的模块热替换特性,
	hotOnly: {Boolean},
	https: {Boolean}, //默认状况下，dev-server 经过 HTTP 提供服务。也能够选择带有 HTTPS 的 HTTP/2 提供服务
	inline: {Boolean}, //在 dev-server 的两种不一样模式之间切换。默认状况下，应用程序启用内联模式(inline mode)
	noInfo: {Boolean},//启用 noInfo 后，诸如「启动时和每次保存以后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示
	proxy: {object},//
	public: {string},//
	publicPath: {string},//
	quiet: {Boolean},//启用 quiet 后，除了初始启动信息以外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见
	setup: {function},//
	staticOptions: {object},//
	stats: {string|object}.//容许你精确控制 bundle 信息展现
	watchContentBase: {Boolean},//告诉服务器监视那些经过 devServer.contentBase 选项提供的文件。文件改动将触发整个页面从新加载,默认被禁
	watchOptions: {object},// 
}

详细配置和说明参考：https://www.html.cn/doc/webpack2/configuration/dev-server/javascript

HTML插件

将html文件的index文件生成在build目录下html

在src目录中建立index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自学webpack</title>
</head>
<body>
    
    <!-- 模板 -->
</body>
</html>

安装html-webpack-plugin
npm install html-webpack-plugin -D
在webpack中引用html-webpack-plugin插件
let HtmlWebpackPlugin = require("html-webpack-plugin");
在webpack.config.js中配置配置相应的参数

plugins:[ // 数组 放着全部的插件
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        minify: {
            removeAttributeQuotes: true, //去掉双引号
            collapseWhitespace: true //将html打印成一行
        },
        hash: true // 为了解决缓存的问题，添加哈希戳
    })
]

html-webpack-plugin详细配置

this.options = _.extend({
  template: path.join(__dirname, 'default_index.ejs'),
  templateParameters: templateParametersGenerator,
  filename: 'index.html',
  hash: false,
  inject: true,
  compile: true,
  favicon: false,
  minify: false,
  cache: true,
  showErrors: true,
  chunks: 'all',
  excludeChunks: [],
  chunksSortMode: 'auto',
  meta: {},
  title: 'Webpack App',
  xhtml: false
}, options);

简单介绍各个含义：java

title：{String} 用来生成页面的 title 元素
template：{String} 源模板文件
inject：{Boolean|String} 放置js资源。true || 'head' || 'body' || false,若是设置为 true 或者 body，全部的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。false则不会引入。
hash:{Boolean} 将添加一个惟一的 webpack 编译 hash 到全部包含的脚本和 CSS 文件，对于解除 cache 颇有用
favicon:{String} 添加特定的 favicon 路径到输出的 HTML 文件中
cache:{Boolean} 只有文件修改后才会从新打包文件
minify：{Boolean|Object} true if mode is 'production', otherwise false,
{
  collapseWhitespace: true,//是否去除html中的空格、换行符,元素内的不会去除的
  removeComments: true,//是否去除html注释
  removeRedundantAttributes: true,//
  removeScriptTypeAttributes: true,//去掉script标签的type属性
  removeStyleLinkTypeAttributes: true,//去掉style和link标签的type属性
  useShortDoctype: true//
}