Webpack打包HTML/图片/其他资源

lyz自学笔记

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何打包HTML资源

1、还是先创建两个文件：index.html/index.js，代码就不在这里显示了
2、打包HTML资源需要使用一个插件‘html-webpack-plugin’，所以需要下载插件‘html-webpack-plugins’
3、下载完成后引入webpack-config文件中

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

4、引入后在plugins函数中配置

	const {
     resolve} = require('path')

	module.exports = {
     
	  entry: './src/index.js',
	  output: {
     
	    filename: "build.js",
	    path: resolve(__dirname,'build')
	  },
	  module: {
     
	    rules: [
	
	    ]
	  },
	  plugins: [
	  //html-webpack-plugin：默认会创建一个空的HTML，自动引入打包输出所有资源（js/css）
	    new HtmlWebpackPlugin({
     
	   	  //使用template可以复制此文件夹下的index.html文件，就不会使用默认的
	      template: "./src/index.html"
	    })
	  ],
	  mode:'development'
	}

二、打包图片资源

1、编写index.less、index.html和index.js文件，并且在index.less文件中引入三张图片，index.js将index.less文件导入。

	/*index.html*/
	
		
"div1">
		
"div2">
		
"div3">
		
		"hzw.jpg" alt="海贼王">
	

	//index.less
	#div1{
     
	  width: 100px;
	  height: 100px;
	  background-image: url("./background.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}
	#div2{
     
	  width: 200px;
	  height: 200px;
	  background-image: url("./login.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}
	#div3{
     
	  width: 300px;
	  height: 300px;
	  background-image: url("./aa.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}

2、编写webpack-config.js配置

const {
     resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
     
  entry:'./src/index.js',
  output:{
     
    filename:'built.js',
    path:resolve(__dirname,'build')
  },
  module:{
     
    rules:[
      {
     
        test:/\.less$/,
        //配置多个loader处理用use
        use:['style-loader','css-loader','less-loader']
      },
      {
     
        //	处理图片资源：但是处理不了HTML中的img图片
        test: /\.(jpg|png|gif)$/,
        //处理一个loader可以使用loader
        loader: 'url-loader',
        //其他设置
        options: {
     
          //图片大小小于8kb，就会被base64处理
          	//优点：减少请求数量（减轻服务器压力）
          	//缺点：图片体积会更大（文件请求速度更慢）
          limit: 8 * 1024 * 1024,
          //因为url-loader没人使用ES6模块化解析，二html-loader引入图片是CommonJs
          //解析时会出问题：【object Module】
          //解决这个问题就需要关闭url-loader的ES6模块化，使用CommonJs解析
          esModule:false,
          //打包后的图片的名字[hash:10]:取图片前十位的哈希值，[ext]：保存原先的扩展名
          name:'[hash:10].[ext]'
        }
      },
      {
     
        test:/\.html$/,
        //处理HTML文件的img图片（负责引入img，从而能被url-loader进行处理）
        loader: 'html-loader'
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
     
      template: "./src/index.html"
    })
  ],
  mode:'development'
  // mode:'production'
}

3、处理图片资源需要使用两个loader：‘url-loader’依赖于‘file-loader’，下载这两个loader。处理html的img引入图片的loader：html-loader也需要下载

4、在当前目录的终端下使用‘webpack’命令进行打包，打包后生成一个js文件和index.html文件

三、打包其他资源
1、例如需要引入其它的资源，如阿里云的一些图标库，
2、就需要在webpack中配置

	const {
     resolve} = require('path')
	const HtmlWebpackPlugin = require('html-webpack-plugin')
	
	module.exports = {
     
	  entry: './src/index.js',
	  output: {
     
	    filename: "built.js",
	    path: resolve(__dirname,'build')
	  },
	  module: {
     
	    rules:[
	      {
     
	        test: /\.css$/,
	        use:['style-loader','css-loader']
	      },
	      //打包其他资源
	      {
     
	       //排除css|js|html资源
	        exclude: /\.(css|js|html)$/,
	        loader: 'file-loader',
	        options: {
     
	          name:'[hash:10].[ext]'
	        }
	      }
	    ]
	  },
	  plugins: [
	      new HtmlWebpackPlugin({
     
	        template: "./src/index.html"
	      })
	  ],
	  mode:'development'
	}