接上一篇《webpack 之vue 初级打包1 》
到目前位置vue第一个页面已经可以正常运行了，其中还有一些地方可以更加方便快捷。期待更加智能更加快速。依据webpack给出到原则一切皆模块，上文我们只是针对js做了打包，现在期望html也打包，图片、css 也做打包模块处理。

优化内容

动态添引入script 加载js，并且指定到头部或者底部
优化缓存问题加入hash 值
动态生成html入口文件，一个或者N个

上文中在编译打包好js、vue之后，还需要手动在html里面加入js到引入地址：

<div id="app"></div>
<script src="./dist/build.js"></script>

先来优化这一步，动态加入script标签，webpack本身提供很多功能，并且提供了强大到插件功能，只需要在 plugins里面配置就可以。这里动态加入script 推荐HtmlWebpackPlugin，差不多可以优化今天到需求

HtmlWebpackPlugin 插件

这个插件很强大几乎完成了。需要优化的全部功能，一步一步来。
安装

npm i -D html-webpack-plugin

使用配置，打开 webpack.config.js 导入插件，然后找到plugins 的webpack选项，如果没有就手动加上去。

const HtmlWebpackPlugin = require('html-webpack-plugin');

在plugins 直接使用看看会有什么效果

plugins:[new VueLoaderPlugin(), // vue 插件new HtmlWebpackPlugin()  //]

直接运行

npm run dev

在更目录下发现了了dist文件荚里面包含build.js 这是是在webpack配置打包输出文件，书写的；同时有一个文件index.html 这个文件就是 HtmlWebpackPlugin 默认生成的入口html文件，打开

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><script src="build.js"></script></body>
</html>

注意观察，自动加入了js 文件，这个意味着，不在需要手动在html加入script标签引入外部js，但是html，不想用自动生成的，需要自己的html为入口，修改html-webpack-plugin参数
template:‘模版路径，可以任意你喜欢的模板，可以是 html, jade, ejs, hbs’

new HtmlWebpackPlugin({template:'index.html'})

因为我的index.html 文件在根目录下因此直接些就行，如果在其他地方需要输入完整路径；
现在看一下结果，打开dist/index.html 发现已经是我们写好的html文件、同时js也已经动态加载上去了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>木子聊前端</title></title><meta name="description" content="提供0到1到基础前端学习，实战层层深入,有问题咨询v:chinaynlmq"><meta name="keywords" content="前端,javascript,html5"></head><body><!-- ---><div id="app"></div><!-- <script src="./dist/build.js"></script> --><script src="build.js"></script></body>
</html>

去掉html里面的注解

我们在发布代码的时候为了加少html的体积，根希望去掉一些对上线无用的代码比如注解和空格，注解只是对开发有用
minify 参数是对html压缩，默认是false不压缩，就是刚我们看到的样子，现在我们添加这个参数试试
minify 里面是一个配置对象

new HtmlWebpackPlugin({template:'index.html',minify:{//是否移除注释 默认falseremoveComments: true,//是否去除空格，默认falsecollapseWhitespace: true}})

运行一下代码发现注解和空格已经去掉了。minify 有很多配置就不一一实验，用到的时候自己实验
列举一下常用配置

minify: {//是否对大小写敏感，默认falsecaseSensitive: true,//是否简写boolean格式的属性如：disabled="disabled" 简写为disabled  默认falsecollapseBooleanAttributes: true,//是否去除空格，默认falsecollapseWhitespace: true,//是否压缩html里的css（使用clean-css进行的压缩） 默认值false；minifyCSS: true,//是否压缩html里的js（使用uglify-js进行的压缩）minifyJS: true,//Prevents the escaping of the values of attributespreventAttributesEscaping: true,//是否移除属性的引号 默认falseremoveAttributeQuotes: true,//是否移除注释 默认falseremoveComments: true,//从脚本和样式删除的注释 默认falseremoveCommentsFromCDATA: true,//是否删除空属性，默认falseremoveEmptyAttributes: true,//  若开启此项，生成的html中没有 body 和 head，html也未闭合removeOptionalTags: false, //删除多余的属性removeRedundantAttributes: true, //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值falseremoveScriptTypeAttributes: true,//删除style的类型属性， type="text/css" 同上removeStyleLinkTypeAttributes: true,//使用短的文档类型，默认falseuseShortDoctype: true,}

解决js缓存问题

以前在解决引入js缓存问题，通常在后面加上一个随机数，现在有了webpack，引入了更牛比的操作动态加入hash操作

new HtmlWebpackPlugin({...
hash:true
})

结果很理想

<script src="build.js?928a9b70d2d6b56408ba"></script>

多个入口文件，多个模版怎么玩

多个文件入口，多个模版。HtmlWebpackPlugin 还能玩么？当然可以，来试一下
从index.html 复制两个html模版

index.html
muzi.html
sub.html

依据 index.html 的模式准备好入口js 和vue文件，不然流程走不通，我们要准备多页面了
修改webpack.config.js

module.exports = {entry:{index: './src/main.js',muzi: './src/muzi.js',sub: './src/sub.js'
}, // 打包的输入路径output: {path:path.resolve(__dirname,'./dist'),// filename:'build.js'}
... // 和上面配置一样此处省略
}

结果：

 <script src="index.js"></script><script src="muzi.js"></script><script src="sub.js"></script></body>

js 全部放到index.html 页面了。而这个页面只需要index.js 另外一个参数出场
chunks 意识是改模板需要包含的js
我只需要一个js

new HtmlWebpackPlugin({template:'index.html',minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},chunks:['index']//hash:true})

chunks 里面是一个数组，数组名字和entry 入口对应，
现在index.html 里面就只有index这个js了

<body><div id="app"></div><script src="index.js"></script></body>

类似的参数还有一个不包含 excludeChunks

new HtmlWebpackPlugin({template:'index.html',minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},// chunks:['index']excludeChunks:['muzi','sub']//hash:true})

excludeChunks 去除不包含的js，也是依据入口js判断

有了这写基础的怎么实现每个模版对应相关的js呢？
我们需要使用 HtmlWebpackPlugin插件就可以完成

    new HtmlWebpackPlugin({template:'index.html',minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},chunks:['index']//hash:true}),new HtmlWebpackPlugin({template:'sub.html',minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},chunks:['sub']//hash:true}),new HtmlWebpackPlugin({template:'muzi.html',minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},chunks:['muzi']//hash:true})

运行发现不理想，只有一个index.html。出问题了。别慌
这个是因为HtmlWebpackPlugin 默认输出文件是index.html 我们只是配置了获取模版的路径没有配置输出路径，这个名字叫做filename
filename：‘输出的文件名字’

....
new HtmlWebpackPlugin({filename:'sub.html',template:'sub.html',....});

其他的补充上去就ok, 运行发现对应的js和html都自动生成了。这个插件真的厉害。可是多个入口多个模版多个js就需要多个new HtmlWebpackPlugin ，依靠复制？这个显然不利于我们编写代码和维护。
怎么解决。作为程序员肯定是要用程序去帮助我们。

分析一下 HtmlWebpackPlugin 是依赖 webpack的一个插件，而webpack配置插件是一个叫plugins的配置参数。里面包含的是一组数组，那么去实现动态添加数组就可以，那么入口呢？
entry 配置支持数组、字符串、和字面量对象，选择字面量对象作为多入口配置比较理想，通过key和value 更加明晰
现在需要解决的问题是。entry入口文件的js 、路径和输出模版的配置js文件名字怎么一一对应？
对应关系应该有很多，等想到更好的在补充
现在我用的是建立一个统一的规则，把所有的多页面项目放到一个文件荚里面，然后在里面依据功能分类。动态获取文件夹的名字为输出文件路径；
目录改造
在src目录下新建一个code目录，然后在code目录里面建立子项目目录文件夹，在子项目里面，建立js，html，vue代码，这个时候，js，html，vue需要统一命名，因为我们取的是文件夹的名字，以上改造如下

这时，所有的逻辑代码都可以在app.vue 中书写，其他代码保持不变
开始修改webpack打包文件，让它自动化
代码思路
1、获取所有需要配置的入口路径

//获取所有code下多有的index.html 文件。
let htmlFiles = glob.sync('src/code/**/index.html');

2、通过循环把对应关系建立上

// 定义保存入口和插件的变量
let entry ={},plugins=[];
htmlFiles.forEach(function(item,i){//获取文件夹名 返回一个数组const filenames = item.match(/code\/(.+)\/index.html$/);// 模版名字和js名字一一对应 也就是chunkconst templateName = filenames[1];// 获取入口路径const scrPth = path.resolve(__dirname,'..','src');const mainjs = `${scrPth}/code/${templateName}/main.js`;// 配置入口路径entry[templateName] = `./src/code/${templateName}/main.js`;// 配置输出模板plugins.push(new HtmlWebpackPlugin({filename:templateName+'.html',template:item,minify:{//是否移除注释 默认falseremoveComments: true,//collapseWhitespace: true},chunks:[templateName]//hash:true}));
});

3、修改原来配置

module.exports = {entry:entry, // 上面的变量....plugins:plugins // 上面的变量
}

至此就不在需要手动去配置入口和输出的模版的地址，运行一下。很完美的实现了。
那么比如sub里面包含多个文件夹呢？试一下
在sub里面加入sub1 和sub2

运行，完美实现！单页面就没这么复杂。一项配置就搞定
记得关注我。书写好好累！
下一篇继续优化打包配置
公用js的处理，
清除打包文件
公用css的处理

webpack 之vue 初级打包2 从零开始相关推荐

webpack 之vue 初级打包1 从零开始
摘要 vue本身提供了一个脚手架,vue-cli,直接就可以使用,一般不需要从零去构建一个webpack打包机制,但是作为一个前端开发,基础的还是需要了解和知道,万一和我一样不像用vue的打包配置呢? ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...
从零开始搭建webpack的vue生产/开发环境
一.初始化项目在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
Webpack配置vue打包环境时报错
Webpack配置vue打包环境时报错,大片飘红头都大了- ERROR in ./src/App.vue Module build failed (from ./node_modules/_vue- ...
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
vue+webpack创建的项目打包发布至服务器,页面空白及背景图片不显示问题解决一. 页面显示空白二. 背景图片不显示一. 页面显示空白解决方法: config > index.js ...
vue的router部署从零开始
vue的router部署从零开始先建立项目 vue init webpack learnvuerouter 通过映射表转化一些信息传达前端渲染,后端渲染(100)https://www.bilib ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...

webpack 之vue 初级打包2 从零开始