webpack——html-webpack-plugin

一开始考虑到浏览器的缓存问题，所以给打包的文件都带了.[hash],但是，这之后，index.html文件中的引入并没有哈希值，所以，就用到了下面的信插件：

html-webpack-plugin可以根据你设置的模板，在每次运行后生成对应的模板文件，同时所依赖的CSS/JS也都会被引入，如果CSS/JS中含有hash值，则html-webpack-plugin生成的模板文件也会引入正确版本的CSS/JS文件。

 

一，install:

cnpm install html-webpack-plugin --save-dev

二，在webpack.config.js引入：

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

三，配置：

module.exports = {
    entry: './app/index.js',
    output: {
        ...
    },
    module: {
        ...
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "This is the result",
            filename: "./index.html",
            template: "./app/index.html",
            inject: "body",
            favicon: "",
            minify: {
                caseSensitive: false,
                collapseBooleanAttributes: true,
                collapseWhitespace: true
            },
            hash: true,
            cache: true,
            showErrors: true,
            chunks: "",
            chunksSortMode: "auto",
            excludeChunks: "",
            xhtml: false
        })
    ]
};

我这里用到的写法：

        new HtmlWebpackPlugin({
            title: '麦旺通后台管理',
            filename: __dirname + "/dist/index.html",//复制后存储路径
            template: __dirname + "/src/index.html", // 模板路径
            inject: "body",//引入模块的注入位置,取值true/false/body/head,默认是body
            favicon: "",//指定页面的图标
            minify: {
                caseSensitive: false,//是否大小写敏感
                collapseBooleanAttributes: true,//是否简写boolean格式的属性如：disabled="disabled" 简写为disabled
                collapseWhitespace: true//是否去除空格
            },
            hash:true,//是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳
            cache:true,//是否需要缓存，如果填写true，则文件只有在改变时才会重新生成
            showErrors: true,//是否将错误信息写在页面里，默认true，出现错误信息则会包裹在一个pre标签内添加到页面上
            chunks: "",//引入的模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入
            chunksSortMode: "auto",//引入模块的排序方式
            excludeChunks: "",//排除的模块
            xhtml: false//生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false
        }),

解释以注释的形式写在其中，便于理解和记忆。

 

参考地址：

https://segmentfault.com/a/1190000008590102

总结：主要是解决在dist文件夹下生成index.html