(7/24) 插件配置之html文件的打包发布

从前面几节到如今，其实咱们的项目结构是有问题的，由于咱们直接把index.html文件放到了dist文件夹目录下。这确定是不正确的，应该放到咱们src目录下，而后打包到dist目录下，前面为了学习，才把index.html放到了dist目录下。

此节咱们就来完成把开发环境中的html文件打包到咱们的生产路径下。

1.打包HTML文件

 

在开始下面内容以前，咱们先改造一下以前的项目结构，先把dist中的index.html文件剪切到src目录中，并去掉咱们引入的js代码（webpack会自动为咱们引入js）,src才是咱们真正工做的目录文件结构。而后删除以前手动建立的dist目录。

看看目前的项目结构目录：

1.1 安装html-webpack-plugin插件

npm install --save-dev html-webpack-plugin

1.2 引入html-webpack-plugin插件

在webpack.config.js文件中，引入html-webpack-plugin插件：

const htmlPlugin= require('html-webpack-plugin')

1.3 插件配置

在webpack.config.js里的plugins里进行插件配置，配置代码以下：

new htmlPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        })

注释：

• minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。

• hash：为了开发中js有缓存效果，因此加入hash，这样能够有效避免缓存JS。

• template：是要打包的html模版路径和文件名称。

1.4 打包

上边的都配置完成后，咱们就能够在终端中使用webpack命令，进行打包。结果index.html文件被打包到咱们的dist目录下了，而且自动引入了入口的js文件。

 

1.5 启动服务

 在终端中执行npm run server命令，此时咱们能够看到服务能正常启动，而不是像上一节中会出现冲突。咱们能够经过 http://localhost:1818/ 进行访问。

访问效果以下，其效果与以前一致。为此咱们成功完成了html文件的打包发布工做。

总结：

html文件的打包能够有效的区分开发目录和生产目录，在webpack的配置中也要搞清楚哪些配置用于生产环境，哪些配置用于开发环境，避免两种环境的配置冲突。