webpack4 打包html资源

绝地灬酷狼 2021-07-24 13:43 540阅读 0赞

1、下载插件
    	cnpm i -D html-webpack-plugin
    
    2、引入插件
    	const X = require('html-webpack-plugin');
    
    3、使用插件
    	该插件作用:
    	(1)会自动创建html文件,并自动引入打包后的资源文件
    	(2)若使用了template指定资源模板后,创建的html会复制该文件
    
    	plugins:[
    		new X(template:'要复制的指定html模板文件路径')
    	]
    	输出文件的文件名称，默认为index.html
    	
    4、压缩html代码
    	plugins:[
    		new X({ 
    			template:'要复制的指定html模板文件路径'
    			minify: {
            		collapseWhitespace: true, 折叠空格
            		removeComments:true  移除注释
          		}			
    		}),
    		其他额外参数:
    		new X({ 
    			template:'要复制的指定html模板文件路径',
    			templateContent: string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。
    			filename:输出文件的文件名称，默认为index.html，
    			hash:true,  给引用文件添加hash值
    			inject:'body', 
    				true || 'head' || 'body' || false将所有资产注入到给定的template或templateContent中。
    				body',所有javascript资源将被放置在body元素的底部。
    				head,将把脚本放置在head元素中。
    				true,将把它添加到头部/主体。
    				false,将禁用自动注射。—请参见inject:false示例
    			chunks:['app'],		允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中
    				使用于多页面打包
    			excludeChunks:['app'],	排除注入的chunk
    			chunksSortMode:'auto'	引入资源的顺序
    				'none' | 'auto' | 'manual' | {Function}
    				'manual'	手动排序,即根据entry中的顺序进行引入
    			minify: {
            		collapseWhitespace: true, 折叠空格
            		removeComments:true,  移除注释
            		html5:true,
            		minifyCSS:true,
            		minifyJS:true,
            		
          		}			
    		}),
    	]

代码示例:

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = { 
      entry: './src/index.js',
      output: { 
        filename: 'build.js',
        path:path.resolve(__dirname,'build')
      },
      module: { 
        rules: [//创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
          { 
            test: /\.css$/, //匹配文件名
            use: [//使用哪些loader
              'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
              'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
            ] 
          },
          { 
            test: /\.less$/,
            use: [
              'style-loader',
              'css-loader', 
              'less-loader', //将less文件编译成css文件
            ]
          }
        ]
      },
      //插件
      plugins: [
        new HtmlWebpackPlugin({ 
          template:'./src/index.html', //将模板复制成指定文件
          minify: { 
            collapseWhitespace: true, //折叠空格
            removeComments:true  //移出注释
          }
        }), //默认传键html文件,并引入打包输出的资源,默认为基本结构
      ],
      mode:'development'
    }