插件说明

HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle
安装命令：npm install --save-dev html-webpack-plugin

配置：

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

  module.exports = {
    // 配置入口文件，入口文件可以引入其他文件
    entry: 'index.js',
    // 出口文件
    output: {
      // 路径 
      path: path.resolve(__dirname, './dist'),
      // 文件名 可以用hash进行命名，其中 [hash:5] 表示仅展示5位哈希值   
      // filename:'index-[hash:5].js' 
      filename: 'index_bundle.js',
    },
    // 使用插件
        plugins:[
        new HtmlWebpackPlugin({
            // 如果使用了template，那么就会忽略title
            title:'this is webpack demo',
            // template进行指定模板html
            template:'./src/index.html',
            // 我们可以通过inject来控制script标签的位置
            inject:'body'
            
        })
    ],
    /*
      HtmlWebpackPlugin有option配置，不进行配置会默认生成一个index.html进行引入入口文件：
    */
  };

CleanWebpackPlugin

作用：每次进行启动webpack命令的时候，都会清除dist目录下的所有内容
安装命令: npm install --save-dev clean-webpack-plugin

  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  ...
  plugins:[new CleanWebpackPlugin()]

loader image-webpack-loader node sass

webpack loader图片

loader webpack-loader babel-loader语法

webpack-loader webpack文件loader

优缺点webpack-loader webpack loader

转换器常用webpack loader

526互联

webpack基本配置（插件 + loader）

插件说明

HtmlWebpackPlugin

CleanWebpackPlugin