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

html-css017

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。