Entry(入口)

在webpack.config.js中，当我们不配置入口文件的话，会默认找/src/index.js文件。

参数配置

• 如果只配置一个入口文件，则后面直接使用string形式：

  entry:'./src/index.js',

• 如果是多个入口文件，则用Array形式，默认会输出一个文件：

  entry:['./src/index.js','./src/index2.js'],

• 如果入口为多个文件，输出时候也为多个对象，则使用json形式，这时候要配合Output进行处理

  entry:{
      page1:'./src/index.js',
      page2:'./src/index2.js',
  },

Output(出口)

在webpack.config.js中，当我们不配置出口文件的话，默认输出为：/dist/main.js。

参数配置

• 如果入口文件为多个，输出时候也是多个，这时候就需要配置一下filename:

   // 入口文件
    entry:{
        page1:'./src/index.js',
        page2:'./src/index2.js'
    },

    // 出口
    output:{
        path:__dirname+'/dist',
        filename:'[name].js'
    },

• 打包后输出为：/dist/page1.js和/dist/page2.js文件。

html打包-html-webpack-plugin

webpack默认不会打包html，需要相应的插件去处理：html-webpack-plugin

插件的使用

1.下载插件

   npm i html-webpack-plugin -D

2.引用插件

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

3.使用插件

• 在plugins中new一下

      //插件的配置
      plugins:[
          new HtmlWebpackPlugin()
      ],
  }

• 完整代码如下：

  const path=require('path');
  const HtmlWebpackPlugin=require('html-webpack-plugin');
  module.exports={
      // 入口文件
      entry:{
          page1:'./src/index.js',
      },

      // 出口
      output:{
          path:__dirname+'/dist',
          filename:'[name].js'
      },
      // 关于loader 配置
      module:{

      },

      //插件的配置
      plugins:[
          new HtmlWebpackPlugin()
      ],

      // 服务器的配置
      devServer:{

      }
  }

• 执行webpack，就会生成/dist/index.html和/dist/page1.js文件。

默认直接使用，会自己生成一个index.html文件，并在文件中生成script标签引入js文件。

html-webpack-plugin相关配置

• template:用于配置模版

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模版
        })
    ],

• title:动态配置网站标题

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模版
            title:'测试标题'
        })
    ],

    // src/index.html中：
    <title> <%= htmlWebpackPlugin.options.title %></title>

• hash:用来生成hash值，避免缓存,默认为false

    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模版
            title:'测试标题',
            hash:true
        })
    ],  

• minify:用来压缩html文件

  plugins:[
    new HtmlWebpackPlugin({
        template:'./src/index.html', //模版
        title:'测试标题',
        hash:true,
        minify:{
            collapseWhitespace:true, //折叠空白区域
        }
    })
  ],

如何多页配置方法

需求：在src目录下有index.html和index2.html，还有index.js和index2.js,想在页面中分别引入。

• 使用filename和chunks即可实现

    //插件的配置
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html', //模版
            title:'页面1',
            hash:true,
            filename:'index.html', //生成文件名字
            chunks:['page1'] //对应引入的js文件

        }),
        new HtmlWebpackPlugin({
            filename:'index2.html',
            template:'./src/index2.html', //模版
            title:'页面2',
            hash:true,
            chunks:[
                'page2'
            ]

        })
    ],