webpack05 多入口文件页面打包配置

大多数情况，我们使用webpack打包单页面应用，有的时候也会遇到多页面的项目

单入口配置

一般情况下的配置模板如下：

module.exports = {
  entry: {},
  output: {},
  module: {},
  plugins: [],
  devServer: {}
}

entry：配置入口文件的地址，可以是单一入口，也可以是多入口；
output：配置出口文件的地址，支持多出口配置；
module：配置模块，主要解析CSS和图片转换压缩等功能；
plugins：配置插件；
devServer：配置开发服务功能；

`entry`

我们的入口文件一般都是JS文件

entry： {
  entry: './src/entery.js'
}

`output`

output用来告诉webpack最后打包文件的地址和文件名称

output: {
  //打包后的文件路径
  path: path.resolve(__dirname, 'dist'),
  //打包后的文件名称
  filename: 'bundle.js'
}

当然还要引入path模块，这个是nodejs自带的模块；在webpack.config.js文件的头部引入；

const path = require('path');

打包HTML文件

需要使用html-webpack-plugin插件，它会将我们的html模板文件打包，自动生成一个引用了所有webpack打包的文件的新的html文件：

安装：

npm install html-webpack-plugin --save-dev

在配置文件的plugins内加载

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    minify:{
      removeAttributeQuotes: true,
      collapseWhitespace: true
    },
    template: './src/index.html'
  })]
};

这将会产生一个包含以下内容的文件dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

这样一个最基本的单页面的配置文件如下：

const path = require('path');
module.exports = {
  //入口文件的配置项
  entry: {
    entry: './src/entry.js'
  },
  //出口文件的配置项
  output: {
    //输出的路径，用了Node语法
    path: path.resolve(__dirname, 'dist'),
    //输出的文件名称
    filename: 'bundle.js'
  },
  //模块：例如解读CSS,图片如何转换，压缩
  module: {},
  //插件，用于生产模版和各项功能
  plugins: [new HtmlWebpackPlugin({
    minify:{
      removeAttributeQuotes: true,
      collapseWhitespace: true
    },
    template: './src/index.html'
  })]
  //配置webpack开发服务功能
  devServer: {}
}

多入口配置

多入口配置的时候只需要在entry中多增加一个入口文件

输出文件的时候将filename的值修改为[name].js，作用是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个出口文件

同时将定义多个HtmlWebpackPlugin插件，有几个页面就配置几项

module.exports = {
  entry: {
    client1: './src/client1/client1.js',
    client2: './src/client2/client2.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'client1',
      filename: 'client1.html',
      template: 'src/client1/client1.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    new HtmlWebpackPlugin({
      title: 'client2',
      filename: 'client2.html',
      template: 'src/client2/client2.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ],
};