Webpack从入门到出门（2）

（如转载，请注明出处）

接（1）：

1. 自动创建HTML模版

首先安装html插件：npm i html-webpack-plugin --save-dev

安装完毕后在webpack.config.js中配置如下：

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

module.exports = {

    entry: './src/app.js',

    output: {

        path: __dirname + 'dist',

        filename: 'app.bundle.js'

    },

    plugins: [new HtmlWebpackPlugin()]

}

什么？到这里有可能会报错？比如这样：Cannot find module 'webpack/lib/node/NodeTemplatePlugin'。

那就卸掉全局webpack重新安装，具体操作是这样：

npm remove webpack -g

npm i webpack --save-dev

npm run dev

你会发现又好了，然后我们会发现dist目录下多了一个叫index.html的文件，内部自动引入了app.bundle.js文件。

自定义模版

用上面的配置会自动生成一个默认html模版，如果想要自定义模版，可以修改成以下配置：

plugins:[

newHtmlWebpackPlugin({

 title:'Custom template',

 template:'./src/my-index.html', //Load a custom template (lodash by default see the FAQ for details)

})

]

然后在src目录下建立一个my-index.html文件，输入代码，在终端运行后会在dist目录下找到index.html文件，内部代码与./src/my-index.html一致，只是多了一个app.bundle.js引入文件。

当然，我们也可以这样使用：

在./src/my-index.html下使用模版语法

我们在webpack.package.js中设置titles："My Custom template"

然后在./src/my-index.html中这样使用

打包后会得出同样的文件内容，如下：

还可以在webpack.config.js中设置minify: {

    collapseWhitespace:true

}

用来清除输出模版中的空格, 和 hash: true添加hash。

   输出后的样式是这样：

当然还有很多可选配置，具体可在github中搜索html-webpack-plugin查看。