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//
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。