在前面我们已经大概说过他们的作用了。
在这一节中，我们会对他的更多需求进行补充。

多个入口文件打包

假设现在，我们希望把之前的js文件反复打包多次，应该怎么处理。

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. module.exports = {
  7.   mode: 'development',
  8.   entry: {
  9.     // 在entry对象中，创建两个入口文件
  10.     main: './src/index.js',
  11.     sub: './src/index.js'
  12.   },
  13.   module: {
  14.     rules:[
  15.       {
  16.         test: /\.(jpg|png|gif)$/,
  17.         use:{
  18.           loader: 'url-loader',
  19.           options: {
  20.             name:'[name]_[hash].[ext]',
  21.             outputPath: 'images/',
  22.             limit: 2048 // 2kb
  23.           }
  24.         }
  25.       },
  26.       {
  27.         test: /\.scss$/,
  28.         use:[
  29.           'style-loader', 
  30.           {
  31.             loader:'css-loader',
  32.             options: {
  33.               importLoaders: 2
  34.             }
  35.           },
  36.           'sass-loader',
  37.           'postcss-loader'
  38.         ]
  39.       }
  40.     ]
  41.   },
  42.   plugins:[new HtmlWebpackPlugin({
  43.     template: 'src/index.html'
  44.   }), new CleanWebpackPlugin()], 
  45.   output: {
  46.     // filename: 'bundle.js',
  47.     filename: '[name].js',
  48.     path: path.resolve(__dirname, 'dist')
  49.   }
  50. }

打包成功
image.png
并且在我们的index.html中同时引入这两个文件，
因为我们使用了htmlWebpackPlugin，他发现了现在我们打包要输出两个文件，
这个时候他就会把这两个文件都放到index.html中
image.png

还有一种场景，例如我们很多时候希望把index.html文件打包给后端，作为后端的入口文件
但是js文件可能放到其他服务器。
那么index.html中的js文件引入肯定是需要加上绝对地址的。

  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  4. const { CleanWebpackPlugin } = require("clean-webpack-plugin");
  6. module.exports = {
  7.   mode: 'development',
  8.   entry: {
  9.     // 在entry对象中，创建两个入口文件
  10.     main: './src/index.js',
  11.     sub: './src/index.js'
  12.   },
  13.   module: {
  14.     rules:[
  15.       {
  16.         test: /\.(jpg|png|gif)$/,
  17.         use:{
  18.           loader: 'url-loader',
  19.           options: {
  20.             name:'[name]_[hash].[ext]',
  21.             outputPath: 'images/',
  22.             limit: 2048 // 2kb
  23.           }
  24.         }
  25.       },
  26.       {
  27.         test: /\.scss$/,
  28.         use:[
  29.           'style-loader', 
  30.           {
  31.             loader:'css-loader',
  32.             options: {
  33.               importLoaders: 2
  34.             }
  35.           },
  36.           'sass-loader',
  37.           'postcss-loader'
  38.         ]
  39.       }
  40.     ]
  41.   },
  42.   plugins:[new HtmlWebpackPlugin({
  43.     template: 'src/index.html'
  44.   }), new CleanWebpackPlugin()], 
  45.   output: {
  46.     // 加上前缀
  47.     publicPath:'http://cdn.com.cn',
  48.     filename: '[name].js',
  49.     path: path.resolve(__dirname, 'dist')
  50.   }
  51. }

我们会发现，当前的js都加上了刚刚的地址
image.png

知识补充

output
入口和上下文
管理输出
html-webpack-plugin