webpack入门(二):html-webpack-plugin

一、入口、出口配置

1. 多入口、单出口

//入口配置
    entry: ['./src/index.js','./src/index2.js',]

2. 多入口、多出口

//入口配置
    entry: {
        index: './src/index.js',
        index2: './src/index2.js',
    },
//出口配置
    output: {
        path: path.resolve(__dirname,'dist'),      //此处若非绝对路径，可能报错
        filename: '[name].bundle.js',
    },

二、生成页面插件：html-webpack-plugin

1. 基础使用

(1)安装：cnpm i html-webpack-plugin -D
*注意：此插件依赖webpack、webpack-cli，因此项目本地必须提前安装webpack、webpack-cli
(2)引入：const HtmlWebpackPlugin = require('html-webpack-plugin');
(3)简单使用：

plugins: [
  //生成页面
  new HtmlWebpackPlugin(),
],

(4)配置功能：

plugins: [
  new HtmlWebpackPlugin({
    //页面标题
    title: '自动生成页面',
    //模板
    template: './src/index.html',
    //消除链接生成的缓存
    hash: true,
    //压缩输出
    minify: {
      collapseWhitespace: true,
      removeAttributeQuotes: true,
    },
  }),
],

*注意如果要使用配置中的标题需在html模板中引用，否则可能报错：

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

2. 生成多个页面

plugins: [
        //生成第一个页面
        new HtmlWebpackPlugin({
            //页面引入的模块,名称在入口配置中
            chunks: ['index',],
            //页面的文件名称
            filename: 'index.html',
            //页面标题
            title: '自动生成页面',
            //模板
            template: './src/index.html',
        }),
        //生成第二个页面
        new HtmlWebpackPlugin({
            //页面引入的模块,名称在入口配置中
            chunks: ['index2',],
            //页面的文件名称
            filename: 'index2.html',
            //页面标题
            title: '第二个页面',
            //模板
            template: './src/index2.html',
        }),
    ],

三、删除文件插件：clean-webpack-plugin

1. 安装：cnpm i clean-webpack-plugin -D
2. 引用：const CleanWebpackPlugin = require('clean-webpack-plugin');
3. 使用：

plugins: [
  //删除文件夹dist
  new CleanWebpackPlugin(['dist']),
],

四、开发服务器：webpack-dev-server

1. 安装：cnpm i webpack-dev-server -D
2. 配置：

devServer: {
  //设置服务器访问的基本目录，
  contentBase: path.resolve(__dirname,'dist'),
  //设置服务器IP地址
  host: 'localhost',
  //设置端口
  port: 8080,
  //自动打开浏览器
  open: true,
  //热更新
  hot: true,
},

3. 使用：
   (1)在package.json文件中的 "scripts"，新增dev

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config webpack.config.js --mode development",
  "dev": "webpack-dev-server --mode development"           
  },

(2)在命令行中运行webpack-dev-server
...\webpack>cnpm run dev

4. *注意：
   (1)即使项目中暂未生成dist文件夹，也会根据webpack.config.js文件中的配置搭建服务器。
   (2)json格式中对象的最后一个属性（即"dev"）后不能加","，否则可能报错。
   (3)想要自动打开浏览器可以配置devServer:{open:true,} ，也可以在命令中加入参数"dev": "webpack-dev-server --mode development -open"
   (4)热更新：当某些模块更改时，页面无需刷新即可自动同步更改，开启热更新时，将会阻止页面自动刷新功能。
   要打开热更新需要先启用热更新模块，否则可能会报错：Uncaught Error: [HMR] Hot Module Replacement is disabled.
   开启热更新模块：

//引用webpack
const webpack = require('webpack');

plugins: [
  //启用热更新
  new webpack.HotModuleReplacementPlugin(),
],

五、压缩上线：

使用webpack打包的项目，如果要上线，肯定需要压缩，如何压缩呢？

1. webpack4.x版本非常简单，直接用产品模式打包就行：
   webpack --mode production
2. 之前的版本则需要使用uglifyjs-webpack-plugin插件压缩：
   (1)安装：cnpm i uglifyjs-webpack-plugin -D
   (2)引入：const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
   (3)使用：

plugins: [
  new UglifyjsWebpackPlugin(),
]