打包html js为一个文件,前端工程搭建入门（一）打包js文件，生成html

配置

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

module.exports = {

entry: {

index: './src/index.js',

},

output: {

path: __dirname + '/release',

filename: './bundle.js'

},

module: {

rules: [

{

test: /\.js$/,

exclude: /(node_modules)/,

loader: 'babel-loader'

},

{

test: /\.html$/,

loader: 'html-loader'

}

],

},

plugins: [

new HtmlWebpackPlugin({

template: 'template/index.html'

})

],

};

注意点

output.path 很重要，这个路径直接决定你输出的文件的 根目录，

生成html：

需要使用html-loader先对html文件解析，这个主要针对使用html-webpack-plugin插件的template配置，虽然默认html文件不需要解析，但是官方文档对.html类型文件有一句不被注意的说明:

Be aware, using .html as your template extention may unexpectedly trigger another loader.

请注意，使用.html作为模板扩展可能会意外触发另一个加载器。

在看到这句话之前，我就遇到了问题：

解析模板index.html报错

一开始我以为是wepack4.x 与 html-webpack-plugin 插件版本不匹配，折腾了半天没有卵用，然后百度google各种搜(发现webpack4.0废弃了html-webpack-plugin插件，而且把webpack-cli拆出来单独维护，导致项目里使用webpack就必须再安装webpack-cli，所以我果断选择了webpack3.x)。最后还是要仔细看看文档，发现可能是触发了其他loader，导致html文件解析失败，然后使用了html-loader后问题就解决了。

html-webpack-plugin插件：默认filename是./index.html，这个./是基于output.path路径，所以output.path很重要。

这样就生成了一个html文件，并且自动引入了打包后的js文件。