webpack 如何打包html,在html中可以压缩哪些东西？如何配置?

html-css010

webpack 如何打包html,在html中可以压缩哪些东西？如何配置?,第1张

1. 安装: html-webpack-plugin 插件完成打包

2. 命令：npm install html-webpack-plugin –save-dev

3. 配置：

引入：const HtmlWebpackPlugin = require('html-webpack-plugin')；

module.exports = {

entry: 'index.js',

output: {

path: __dirname + '/dist',

filename: 'index_bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

title: 'My App',（生成的页面标题）

filename: 'assets/admin.html'，（生成的文件名）

template: 'src/assets/test.html'，（原来的index.html）

minify: {

collapseWhitespace: true,

removeComments: true,

removeRedundantAttributes: true,

removeScriptTypeAttributes: true,

removeStyleLinkTypeAttributes: true,

useShortDoctype: true

}

})

]

}（BY三人行慕课）

1. 打包多个页面的js文件 读取src/views下的目录，约定每一个目录当成一个页面，打包成一个js chunk。 2. 打包多个html 循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js chunk。