cssloader往CSS中添加了，但是html中没有添加对应的hash，导致两者对应不上

const path = require('path');

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')



module.exports = {

  context: path.resolve(__dirname, '../../'),

  output: {

    publicPath: './',

    path: path.resolve(__dirname, '../../dist'), // 打包后的文件存放的地方

    filename: '[name].[hash:8].js'// 打包后输出文件的文件名

  },

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      vue$: 'vue/dist/vue.esm.js',

      '@': path.resolve('src')

    }

  },

  module: {

    rules: [

      {

        test: /(\.html|\.xml)$/,

        use: [

          {

            loader: 'html-loader',

          }

        ],

        exclude: /node_modules/

      },

      {

        test: /(\.jsx|\.js)$/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: [

              'env',

              'react'

            ]

          }

        },

        exclude: /node_modules/

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: "[name].[hash:7].[ext]",

          publicPath: "./images/", // 打包后CSS引入的基础路径

          outputPath: "images/" // 打包后输出目录

        }

      },

      {

        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: 'media/[name].[hash:7].[ext]'

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        loader: 'url-loader',

        options: {

          limit: 10000,

          name: 'fonts/[name].[hash:7].[ext]'

        }

      }

    ]

  },

  plugins: [

    new OptimizeCSSAssetsPlugin({}),

  ],

};

const webpack = require('webpack');

const program = require('commander');

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

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const path = require('path');

const baseCOnfig= require('../config/webpack.base.config');

const merge = require('webpack-merge');

const ora = require('ora');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");



const spinner = ora({

  spinner: {

    frames:['←','↑','→','↓'],

    interval: 80,

  },

  color: 'red',

  text: 'Loading...',

});



program

  .command('project [file]')

  .action((project, file) => {

    const entry = path.resolve(__dirname, '../../', 'projects', project, file, 'main.js');

    const inlineCOnfig= merge(baseConfig, {

      entry: function setEntry() {

        return entry; // 入口文件

      },

      mode: 'production',

      module: {

        rules: [

          {

            test: /\.(sa|sc|c)ss$/,

            use: [

              {

                loader: "style-loader"

              },

              {

                loader: MiniCssExtractPlugin.loader,

              },

              {

                loader: "css-loader",

                options: {

                  modules: true, // 指定使用CSS modules

                  localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式

                }

              },

              {

                loader: "postcss-loader",

                options: {           // 如果没有options这个选项将会报错 No PostCSS Config found

                  config: {

                    path: './'

                  }

              }

              }

            ]

          }

        ]

      },

      plugins: [

        new MiniCssExtractPlugin({

          filename: "[name].[chunkhash:8].css",

          chunkFilename: "[id].css"

        }),

        new HtmlWebpackPlugin({

          template: path.resolve(__dirname,'../../', 'projects', project, file, 'index.html'),// template

          minify: {

              removeAttributeQuotes:true

            },

            hash: true,

            filename:'index.html'

        }),

        new FriendlyErrorsPlugin({

          compilationSuccessInfo: {

            messages: ['Your application build successed\n'],

          },

        }),

        new CleanWebpackPlugin('../../dist', {

          root: __dirname,

          verbose: true,

          dry: false

        })

      ],

    });

    spinner.start();

    webpack(inlineConfig, (err, stats) => {

      spinner.stop();

      if (err) {

        console.log(err);

      }

      console.log('build successed');

    });

  });



program.parse(process.argv);

const webpack = require('webpack');

const program = require('commander');

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

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

const path = require('path');

const baseCOnfig= require('../config/webpack.base.config');

const serverCOnfig= require('../server/devServer');

const merge = require('webpack-merge');

const webpackDevMiddleware = require('webpack-dev-middleware');

const webpackHotMiddleware = require('webpack-hot-middleware');

const express = require('express');

const opn = require('opn');



const app = express();



let entry;



program

  .command('project [file]')

  .action((project, file) => {

    entry = path.resolve(__dirname, '../../', 'projects', project, file, 'main.js');

    const inlineCOnfig= merge(baseConfig, {

      entry: function setEntry() {

        return [entry, 'webpack-hot-middleware/client?reload=true']; // 入口文件

      },

      mode: 'development',

      devtool: 'source-map',

      devServer: serverConfig,

      module: {

        rules: [

          {

            test: /\.(sa|sc|c)ss$/,

            use: [

              {

                loader: "style-loader"

              },

              {

                loader: "css-loader",

                options: {

                  modules: true, // 指定使用CSS modules

                  localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式

                }

              },

              {

                loader: "postcss-loader",

                options: {           // 如果没有options这个选项将会报错 No PostCSS Config found

                  config: {

                    path: './'

                  }

              }

              }

            ]

          }

        ]

      },

      plugins: [

        new webpack.HotModuleReplacementPlugin(),

        new FriendlyErrorsPlugin({

          compilationSuccessInfo: {

            messages: [`Your application is running: http://${serverConfig.host}:${serverConfig.port}\n`],

          },

        }),

        new HtmlWebpackPlugin({

          template: path.resolve(__dirname,'../../', 'projects', project, file, 'index.html')// template

        }),

      ],

    });

    const compiler = webpack(inlineConfig);



    app.use(webpackDevMiddleware(compiler, {

      logLevel: 'error',

      progress: true,

      logTime: true,

    }));

    app.use(webpackHotMiddleware(compiler, {

      noInfo: true,

      log: false,

      heartbeat: 2000,

    }));

    app.listen(3000);

    // opn('http://localhost:3000');

  });



program.parse(process.argv);