add doc and test for resource attribute

lcxfs1991 · Jan 20, 2017 · 844293e · 844293e
1 parent 62215a8
commit 844293e
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -243,6 +243,14 @@ Then, the settings for assets in html can be like this. That is to say, we put t
 <link rel="stylesheet" href="index">
 <script src="index"></script>
 ```
+
+If you hope to add attribute to the resource, please add it right before `src` or `rel`.
+
+```javascript
+<script asycn defer src="libs/react"></script>
+<link asycn defer rel="stylesheet" href="index">
+```
+
 But for favico, we can directly write like this:
 ```javascript
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
@@ -392,3 +400,4 @@ If you still don't understand README, you can checkout examples in specWepback w
 - v1.2.0 support using loader and image in html
 - v1.2.2 fix bug from uglify js which remove quotes
 - v1.2.3 just chanage a few text
+- v1.2.4 add doc and test for resource attribute
diff --git a/README_ZH.md b/README_ZH.md
@@ -242,6 +242,12 @@ entry: {
 <script src="index"></script>
 ```
 
+如果你想给资源添加属性，请在`src`与`rel`之前添加。
+```javascript
+<script asycn defer src="libs/react"></script>
+<link asycn defer rel="stylesheet" href="index">
+```
+
 而favico则直接配置:
 ```javascript
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
@@ -392,3 +398,4 @@ plugins: [
 - v1.2.0 支持对html使用loader以及支持image插入到html中
 - v1.2.2 修复uglify js引入的，去掉引号无法匹配问题
 - v1.2.3 改了点小文案而已
+- v1.2.4 给资源属性添加文档与测试用例
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-res-webpack-plugin",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "html generation and resource inline or md5 for webpack",
   "keywords": [
     "front-end",

diff --git a/spec/appSpec.js b/spec/appSpec.js
@@ -233,3 +233,15 @@ describe("image-in-html", function() {
       expect(true).toBe(distContent === resultContent && checkImage);
     });
 });
+
+describe("resource-attr-1", function() {
+    it("=> resource atribute", function() {
+      let distHtml = path.resolve('specWebpack/dist/resource-attr-1/index.html'),
+        resultHtml = path.resolve('specWebpack/result/resource-attr-1/index.html');
+
+      let distContent = fs.readFileSync(distHtml).toString(),
+        resultContent = fs.readFileSync(resultHtml).toString();
+
+      expect(true).toBe(distContent === resultContent);
+    });
+});
diff --git a/specWebpack/.DS_Store b/specWebpack/.DS_Store
diff --git a/specWebpack/dist/resource-attr-1/css/index-332d70.css b/specWebpack/dist/resource-attr-1/css/index-332d70.css
@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/specWebpack/dist/resource-attr-1/index.html b/specWebpack/dist/resource-attr-1/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <title>Tencent QQ</title>
+    <link async defer rel="stylesheet" href="//localhost:9000/./css/index-332d70.css">
+</head>
+<body>
+	<div id="pages" class="qq-ui"></div>
+
+
+	<script async defer src=//localhost:9000/js/index-332d70.js></script>
+</body>
+</html>
diff --git a/specWebpack/dist/resource-attr-1/js/index-332d70.js b/specWebpack/dist/resource-attr-1/js/index-332d70.js
@@ -0,0 +1,67 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "//localhost:9000/";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+
+	__webpack_require__(2);
+
+	var a = "hello world!";
+
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ }
+/******/ ]);
diff --git a/specWebpack/result/resource-attr-1/index.html b/specWebpack/result/resource-attr-1/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <title>Tencent QQ</title>
+    <link async defer rel="stylesheet" href="//localhost:9000/./css/index-332d70.css">
+</head>
+<body>
+	<div id="pages" class="qq-ui"></div>
+
+
+	<script async defer src=//localhost:9000/js/index-332d70.js></script>
+</body>
+</html>
diff --git a/specWebpack/runWebpack.js b/specWebpack/runWebpack.js
@@ -28,6 +28,7 @@ var webpackConfig = [
 	require(basePath + '/resource-copy-plugin-3/webpack.config.js'), // html mode usage with copy-webpack-plugin
 	require(basePath + '/resource-external-1/webpack.config.js'), //  external resource
 	require(basePath + '/image-in-html/webpack.config.js'), //  image in html
+	require(basePath + '/resource-attr-1/webpack.config.js'), //  resource attribute
 ];
 
 fs.removeSync(path.resolve('./specWebpack/dist/'));

diff --git a/specWebpack/src/.DS_Store b/specWebpack/src/.DS_Store
diff --git a/specWebpack/src/resource-attr-1/index.html b/specWebpack/src/resource-attr-1/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh">
+<head>
+    <meta charset="utf-8">
+    <title>Tencent QQ</title>
+    <link async defer rel="stylesheet" href="index">
+</head>
+<body>
+	<div id="pages" class="qq-ui"></div>
+
+
+	<script async defer src=index></script>
+</body>
+</html>
diff --git a/specWebpack/src/resource-attr-1/index.js b/specWebpack/src/resource-attr-1/index.js
@@ -0,0 +1,4 @@
+
+require('./index.less');
+
+var a = "hello world!";
diff --git a/specWebpack/src/resource-attr-1/index.less b/specWebpack/src/resource-attr-1/index.less
@@ -0,0 +1,4 @@
+html, body {
+	margin: 0;
+	padding: 0;
+}
diff --git a/specWebpack/src/resource-attr-1/webpack.config.js b/specWebpack/src/resource-attr-1/webpack.config.js
@@ -0,0 +1,70 @@
+const path = require('path');
+
+var webpack = require('webpack'),
+	config = require('../../config/config'),
+	 nodeModulesPath = path.resolve('../node_modules');
+
+var HtmlResWebpackPlugin = require('../../../index'),
+	ExtractTextPlugin = require("extract-text-webpack-plugin-steamer");
+
+module.exports = {
+	entry: {
+        index: [path.join(config.path.src, "/resource-attr-1/index")]
+    },
+    output: {
+        publicPath: config.defaultPath,
+        path: path.join(config.path.dist + '/resource-attr-1/'),
+        filename: "js/[name]" + config.chunkhash + ".js",
+        chunkFilename: "js/chunk/[name]" + config.chunkhash + ".js",
+    },
+    module: {
+        loaders: [
+            { 
+                test: /\.js?$/,
+                loader: 'babel',
+                query: {
+                    cacheDirectory: false,
+                    presets: [
+                        'es2015', 
+                    ]
+                },
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.css$/,
+                loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
+                include: path.resolve(config.path.src)
+            },
+            {
+                test: /\.less$/,
+                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader"),
+                include: [nodeModulesPath, path.resolve(config.path.src)]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader'
+            },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                loaders: [
+                    "url-loader?limit=1000&name=img/[name]" + config.hash + ".[ext]",
+                ],
+                include: path.resolve(config.path.src)
+            },
+        ],
+        noParse: [
+
+        ]
+    },
+    plugins: [
+        new webpack.optimize.OccurrenceOrderPlugin(),
+        new webpack.NoErrorsPlugin(),
+        new ExtractTextPlugin("./css/[name]" + config.chunkhash + ".css"),
+        new HtmlResWebpackPlugin({
+            mode: "html",
+        	filename: "index.html",
+            template: config.path.src + "/resource-attr-1/index.html",
+	        htmlMinify: null
+        })
+    ],
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@

		require('./index.less');

		var a = "hello world!";