demo3

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","hubinbin91","page",1,"limit",50,"total","id","31928","avatar_url","https://avatars1.githubusercontent.com/u/29529563?v=4","githubUsername","create_at","2018-02-07 07:45:13.329","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"29807","author_id","28174","tab","share","content","> [【Webpack】1.入门及简单使用](https://cnodejs.org/topic/5a3a92ffd92f2f5b185ad090)\r\n[【Webpack】2.四个核心概念及使用](https://cnodejs.org/topic/5a4111798230827a18293a53)\r\n[【Webpack】3.多入口设置与 html-webpack-pugin 插件详解](https://cnodejs.org/topic/5a41ede98230827a18293a8c)\r\n\r\n## 多入口设置与 html-webpack-pugin 插件详解（[Demo3 Source](https://github.com/SilenceHVK/learn-webpack/tree/master/demo3))\r\n 我们可以为 ``` entry ``` 指定多个入口。在开始代码之前，我们需要创建如下目录解构\r\n```\r\n. \r\n├── index.html // 显示的页面\r\n├── main1.js // webpack 入口1\r\n├── main1.js // webpack 入口2\r\n├── style.css // 样式文件\r\n└── webpack.config.js // webpack 中默认的配置文件\r\n```\r\n\r\n 我们在 ``` index.html ``` 文件中输入以下内容：\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n demo3\r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\n 我们在 ``` main1.js ``` 文件中输入以下内容：\r\n```javascript\r\n import './style.css'\r\n \r\n var h1 = document.createElement('h1');\r\n h1.innertHTML = '这是 main1.js 中的内容';\r\n document.body.appendChild(h1);\r\n```\r\n\r\n 我们在 ``` main2.js ``` 文件中输入以下内容：\r\n```javascript\r\n import './style.css'\r\n \r\n var h2 = document.createElement('h2');\r\n h2.innertHTML = '这是 main2.js 中的内容';\r\n document.body.appendChild(h2);\r\n```\r\n\r\n 我们在 ``` style.css ``` 文件中输入以下内容：\r\n```css\r\n h1{ color: red; }\r\n h2{ color: blue; }\r\n```\r\n\r\n 我们在 ``` webpack.config.js ``` 文件中输入以下内容：\r\n```js\r\n const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n const path = require('path');\r\n \r\n const config = {\r\n entry: {\r\n bundle1: './main1.js',\r\n bundle2: './main2.js',\r\n },\r\n output: {\r\n path: path.resolve(__dirname,'dist'),\r\n filename: '[name].js'\r\n },\r\n module: {\r\n rules: [\r\n { test: /\\.css$/, loader: 'style-loader!css-loader' }\r\n ]\r\n },\r\n plugins: [\r\n new HtmlWebpackPlugin({ template: './index.html' })\r\n ]\r\n };\r\n \r\n module.exports = config;\r\n```\r\n 完成上面的代码工作后，运行 ``` webapck ``` 命令，我们打开 ``` dist ``` 文件中的 ``` index.html ```。\r\n![index.html 运行结果](http://img.blog.csdn.net/20171224131340316?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHZrQ29kZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\r\n\r\n运行的结果并不是我们预期的那样展示 ``` h1 ``` 的内容在前，``` h2 ``` 内容在后，打开生成后的 ``` index.html ``` 源码：\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n demo3\r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n从源码中便可得知，先引入的 ``` bundle2.js ``` 文件，也就是 ``` main2.js ``` 的内容，后引入的 ``` bundle1.js ``` 文件，也就是 ``` main1.js ``` 的内容。\r\n\r\n 我们并没有在 ``` index.html ``` 中输入任何引入 ``` JavaScript ``` 文件的代码，那么使用 ``` webpack ``` 打包后生成的文件，是怎么引入 ``` JavaScript ``` 文件的呢。事实上就是通过 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 为我们生成的 ``` index.html ``` 。\r\n\r\n### ``` html-webpack-plugin ``` 中的参数详解\r\n 通过 ``` npm ``` 中的介绍，[html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 是一个 ``` webpack ``` 插件，可以简化 ``` HTML ``` 文件的创建，为我们的 ``` webpack ``` 包提供服务，它包含了一个改变每个编译的文件名参数。使用 ``` lodash ``` 模板提供我们自己的模板或者使用自己的 ``` loader ```。\r\n\r\n 我们可以配置以下参数传递给 ``` HtmlWebpackPlugin ```：\r\n- ``` title ```: 用于生成的 ``` HTML ``` 文档的标题。\r\n- ``` filename ```: 要写入 ``` HTML ``` 的文件。默认为 ``` index.html ``` 。你也可以在这里指定一个子目录（例如：assets / admin.html）。\r\n- ``` template ```: 引入的模板文件，具体内容可以查看[文档](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)。\r\n- ``` inject ```: ``` true | 'head' | 'body' | false ```，指定引入 ``` JavaScript ``` 脚本文件，在生成的``` HTML ``` 中的位置。默认为 true，指``` JavaScript ``` 脚本文件在 ``` ``` 元素中引入；``` head ``` ，指``` JavaScript ``` 脚本文件在 ``` ``` 元素中引入，``` body ``` 与 ``` true ``` 值相同；``` false ``` 指只生成 ``` HTML ``` 文件，不引入任何``` JavaScript ``` 脚本文件。\r\n- ``` favicon ```: 生成的 ``` HTML ``` 文件中的图标路径。\r\n- ``` minify ```: ``` {...} | false ``` 是否对生成的 ``` HTML ``` 文件压缩，默认为 ``` false ```,具体配置可查看 [ html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)\r\n- ``` hash ```: ``` true | false ``` ，如果为 ``` true ``` ，给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值,这对缓存清除非常有用。默认值为 ``` false ```。\r\n- ``` cache ```: ``` true | false ```，如果为 ``` true ``` 则只编译生成更改的内容将文件,默认值为 ``` true ```。\r\n- ``` showErrors ```:``` true | false ```，如果为 ``` true ```,则将错误内容添加到 ``` HTML ``` 中,默认值为 ``` true ```。\r\n- ``` chunks ```: 指定引入的 ``` JavaScript ``` 脚本文件（例如：[ 'bundle1', 'bundle2' ]）。\r\n- ``` chunksSortMode ```: ``` 'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto' ```，对引入的 ``` chunks ``` 进行排序,具体可以查看该[文档](https://github.com/jantimon/html-webpack-plugin/issues/481)。\r\n- ``` excludeChunks ```: 排除掉指定的 ``` JavaScript ``` 脚本文件（例如：[ 'bundle1', 'bundle2' ]）。\r\n- ``` xhtml ```: ``` true | false ```，默认值是 ``` false ``` ，如果为 ``` true ``` ,则以兼容 ``` xhtml ``` 的模式引用文件。\r\n\r\n 现在我们知道了 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 中的参数，下面我们就来修改 ``` webpack.config.js ``` 中的内容:\r\n```javascript\r\n const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n const path = require('path');\r\n\r\n const config = {\r\n entry: {\r\n bundle1: path.resolve(__dirname,'main1.js'),\r\n bundle2: path.resolve(__dirname,'main2.js')\r\n },\r\n output: {\r\n path: path.resolve(__dirname, 'dist'),\r\n filename: '[name].js'\r\n },\r\n module: {\r\n rules: [\r\n { test: /\\.css$/, loader: 'style-loader!css-loader' }\r\n ]\r\n },\r\n plugins: [\r\n new HtmlWebpackPlugin({ \r\n title: '多文件引入', // 生成 html 的标题\r\n filename: 'index.html',// 生成 html 文件的名称 \r\n template: path.resolve(__dirname,'index.html'), // 根据自己的指定的模板文件来生成特定的 html 文件 \r\n // inject: true, // 注入选项有四个值 ture: 默认值，script标签位于html文件的 body 底部, body: 同 true, head: script标签位于html文件的 head 底部,false:不注入script标签\r\n favicon: path.resolve(__dirname,'favicon.ico'), // 生成的 html 文件设置 favicon\r\n minify: {\r\n caseSensitive: false, //是否大小写敏感\r\n collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled=\"disabled\" 简写为disabled \r\n collapseWhitespace: true //是否去除空格\r\n },\r\n hash: true, // hash选项的作用是给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false\r\n cache: true, // 默认值是 true。表示只有在内容变化时才生成一个新的文件\r\n showErrors: true, // showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true\r\n chunks: [ 'bundle1', 'bundle2' ], // 指定引入的 js 文件\r\n //excludeChunks:[ 'bundle1' ], // 排除掉某些 js 文件\r\n /**\r\n * script 标签的引用顺序\r\n * 'dependency' 按照不同文件的依赖关系来排序\r\n * 'auto' 默认值，插件的内置的排序方式\r\n * 'none'\r\n * 'manual'\r\n * funciton 自定义排序，与JS中自定义数组的sort回调一个含义, 具体可以看 https://github.com/jantimon/html-webpack-plugin/issues/481\r\n */\r\n chunksSortMode: function(chunk1,chunk2){\r\n var orders = [ 'bundle1' , 'bundle2' ];\r\n var order1 = orders.indexOf(chunk1.names[0]);\r\n var order2 = orders.indexOf(chunk2.names[0]);\r\n return order1 - order2;\r\n },\r\n xhtml: false // 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件\r\n })\r\n ]\r\n };\r\n\r\nmodule.exports = config;\r\n```\r\n 完成上面的代码工作后，运行 ``` webapck ``` 命令，我们打开 dist 文件中的 index.html。 \r\n![index.html 运行结果](http://img.blog.csdn.net/20171224141021077?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHZrQ29kZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\r\n Nice!与我们的预期效果显示一致。在对 [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 的介绍中，提到了 ``` lodash ``` 模板, 那么该怎么用呢？我们再次修改 ``` webpack.config.js ``` 中的内容，为 ``` HtmlWebpackPlugin ``` 传入 ``` Date ``` 参数:\r\n```javascript\r\n const HtmlWebpackPlugin = require('html-webpack-plugin');\r\n const path = require('path');\r\n\r\n const config = {\r\n entry: {\r\n bundle1: path.resolve(__dirname,'main1.js'),\r\n bundle2: path.resolve(__dirname,'main2.js')\r\n },\r\n output: {\r\n path: path.resolve(__dirname, 'dist'),\r\n filename: '[name].js'\r\n },\r\n module: {\r\n rules: [\r\n { test: /\\.css$/, loader: 'style-loader!css-loader' }\r\n ]\r\n },\r\n plugins: [\r\n new HtmlWebpackPlugin({ \r\n date: new Date(),\r\n title: '多文件引入', // 生成 html 的标题\r\n filename: 'index.html',// 生成 html 文件的名称 \r\n template: path.resolve(__dirname,'index.html'), // 根据自己的指定的模板文件来生成特定的 html 文件 \r\n // inject: true, // 注入选项有四个值 ture: 默认值，script标签位于html文件的 body 底部, body: 同 true, head: script标签位于html文件的 head 底部,false:不注入script标签\r\n favicon: path.resolve(__dirname,'favicon.ico'), // 生成的 html 文件设置 favicon\r\n minify: {\r\n caseSensitive: false, //是否大小写敏感\r\n collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled=\"disabled\" 简写为disabled \r\n collapseWhitespace: true //是否去除空格\r\n },\r\n hash: true, // hash选项的作用是给生成的 js 文件一个独特的 hash 值，该 hash 值是该次 webpack 编译的 hash 值。默认值为 false\r\n cache: true, // 默认值是 true。表示只有在内容变化时才生成一个新的文件\r\n showErrors: true, // showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true\r\n chunks: [ 'bundle1', 'bundle2' ], // 指定引入的 js 文件\r\n //excludeChunks:[ 'bundle1' ], // 排除掉某些 js 文件\r\n /**\r\n * script 标签的引用顺序\r\n * 'dependency' 按照不同文件的依赖关系来排序\r\n * 'auto' 默认值，插件的内置的排序方式\r\n * 'none'\r\n * 'manual'\r\n * funciton 自定义排序，与JS中自定义数组的sort回调一个含义, 具体可以看 https://github.com/jantimon/html-webpack-plugin/issues/481\r\n */\r\n chunksSortMode: function(chunk1,chunk2){\r\n var orders = [ 'bundle1' , 'bundle2' ];\r\n var order1 = orders.indexOf(chunk1.names[0]);\r\n var order2 = orders.indexOf(chunk2.names[0]);\r\n return order1 - order2;\r\n },\r\n xhtml: false // 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件\r\n })\r\n ]\r\n };\r\n\r\nmodule.exports = config;\r\n```\r\n\r\n更改 ``` index.html ``` 中的内容，``` lodash ``` 模板默认支持的是 ``` ejs ``` 模板的语法:\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n demo3\r\n \r\n \r\n <%= htmlWebpackPlugin.options.date %>\r\n \r\n \r\n```\r\n\r\n 完成上面的代码工作后，运行 ``` webapck ``` 命令，我们打开 dist 文件中的 index.html。\r\n![index.html 运行结果](http://img.blog.csdn.net/20171224142044430?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHZrQ29kZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)\r\n\r\n 通过运行结果，我们可以发现在顶部输出了当前时间，也就是 ``` HtmlWebpackPlugin ``` 传入的参数，实际上 ``` HtmlWebpackPlugin ``` 中的参数都可以通过 ``` htmlWebpackPlugin.options.参数名称 ``` 输出，我就不一一列举。","title","【Webpack】3.多入口设置与 html-webpack-pugin 插件详解","last_reply_at","2018-02-23 07:02:27.405","good","top",17,"visit_count",11060,"2017-12-26 06:36:25.009","author",{"_13":54,"_22":55},"SilenceHVK","https://avatars3.githubusercontent.com/u/12862565?v=4"]