devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  compilationSuccessInfo: {
    messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
  },
  onErrors: config.dev.notifyOnErrors
  ? utils.createNotifierCallback()
  : undefined
}))


devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
  compilationSuccessInfo: {
    messages: [
      `App runing at: `,
      `Local: http://${devWebpackConfig.devServer.host}:${port}`,
      `Network: http://${require('ip').address()}:${port}`,
    ],
    
  },
  onErrors: config.dev.notifyOnErrors
  ? utils.createNotifierCallback()
  : undefined
}))

modules.exports = {
  rules:[
    {
      test:/.css$/
        use:[
  // 'style-loader',
  {loader:MiniCssExtract.loader},
  'css-loader',
 // css兼容处理
      {
        loader:'postcss-loader',
        options:{
          ident:'postcss',
          plugins:()=>{
            require('postcss-preset-env')()
          }
    	}
]
}
],
plugins:[
  new MiniCssExtract({
    filename:'[name].css' // 可选配置
  })
  // 压缩css
    new OPtimizeCssAssetsWebpackPlugin()
]
}

const webpack = require("webpack");
const webpackConfig = require("./webpack.prod.js");
const chalk = require("chalk");
const ora = require("ora");

const spinner = ora("building for production...");
spinner.start();

webpack(webpackConfig, (err, stats) => {
  spinner.stop();
  if (err) throw err;
  process.stdout.write(
    stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false,
    }) + "\n\n"
  );
  if (stats.hasErrors()) {
    console.log(chalk.red("  Build failed with errors.\n"));
    process.exit(1);
  }
  console.log(chalk.cyan("Build complete(打包成功).\n"));
  console.log(chalk.yellow("输出目录dist"));
});

// ...
// 压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// ...

const config = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      // 添加 css 压缩配置
      new OptimizeCssAssetsPlugin({}),
    ]
  },
 // ...
}

// ...

const TerserPlugin = require('terser-webpack-plugin');

const config = {
  // ...
  optimization: {
    minimize: true, // 开启最小化
    minimizer: [
      // ...
      new TerserPlugin({})
    ]
  },
  // ...
}

// ...
const PurgecssWebpackPlugin = require('purgecss-webpack-plugin')
const glob = require('glob'); // 文件匹配模式
// ...

function resolve(dir){
  return path.join(__dirname, dir);
}

const PATHS = {
  src: resolve('src')
}

const config = {
  plugins:[ // 配置插件
    // ...
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true})
    }),
  ]
}

module.exports ={
	// 多入口
	entry:{
		main:'./src/index.js',
		test:'./src/test.js'
	}
	output:{
		flename:'js/[name].[contenthash:10].js',
		path:resolve(__dirname,'build')
	},
  // 单入口：将node_modules的代码单独打包到chunk输出
  // 多入口js共用到的包，单独打包成一个chunk输出
  optimization:{
     splitChunk:{
       chunks:'all'
     },
      splitChunks:{
        cacheggroups:{
          common:{
            chunk:'initial',
            minSize:0,//多大开始抽离
            minChunks:2//调用几次开始抽离
          },
          vendor:{
						priority:1, // 权重
            test:/node_modules/,
            chunks:'initial',
            minSize:0,
            minChunks:2
          }
        }
      }
   }
}
// js引入的js不想合并打包，使用动态加载方式
// js里面动态加载,webpackChunkName: 'test' 打包后的名字，不写显示id
import(/* webpackChunkName: 'test' */ './test')
  .then()
	.catch()

// webpack.config.js
const WorkWebpackPlugin = require('workbox-webpack-plugin')
module.exports={
	module:{},
	plugins:[
		new WorkWebpackPlugin.GenerateSW({
			clientsClaim:true,
			skipWaiting:true
		})
	]
}
// index.js,代码得在server端运行
// 注册serviceworker
if('serviceWorker' in navigator){
	window.addEventListener('load',()=>{
		navigator.serviceWorker
			.register('/service-worker.js')
			.then()
			.catch()
	})
}
package.json
"eslintConfig":{
  "env":{
    "browser":true // 支持浏览器全局变量navigator,window这些
  }
}