配置

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    
    
  mode: "production",
  entry: "./src/index.js",
  output: {
    
    
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
    assetModuleFilename: "image/[contenthash][ext]",
    clean: true,
  },
  module: {
    
    
    rules: [
      {
    
    
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: ["babel-loader"],
      },
      {
    
    
        test: /\.(css|less)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
    
    
        test: /\.(png|svg|jpg|gif)$/,
        use: ["url-loader"],
      },
      {
    
    
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["url-loader"],
      },
    ],
  },
  //   devtool: "inline-source-map",
  devServer: {
    
    
    static: "./dist",
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: "./public/index.html",
      filename: "index.html",
      title: "webpack_day02",
      inject: "body",
    }),
    new MiniCssExtractPlugin({
    
    
      filename: "style/[name][contenthash:8].css",
    }),
  ],
  optimization: {
    
    
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
};

配置loader解析器

• 解析css less sass // style-loader css-loader less-loader sass-loader
• 解析js babel 降级 // babel-loader @babel/core @babel/preset-env
• 解析图片 //url-loader
• 解析文件，ttf等 //url-loader
• 解析数据 xml csv // csv-loader xml-loader

关于production环境下的配置

// 在output 里统一设置图片路径
output:{
    
    
	assetModuleFilename:"image/[name][contenthash:8][ext]" // 配置图片路径
}
// 配置css 分离 css压缩
// 安装插件 npm install --save-dev mini-css-extract-plugin css-minimizer-webpack-plugin
 // css分离 和 css压缩
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins:[
	new MiniCssExtractPlugin({
    
    
		filename:"style/[name][contenthash:8].css" // 设置css路径
	})
]
---------------------------------------------------------
// 图片
module.exports={
    
    
	output:{
    
    
		assetModuleFilename:"image/[name][contenthash:8][ext]" // 配置图片路径
	},
	plugins:[
		new MiniCssExtractPlugin({
    
    
			filename:"style/[name][contenthash:8].css" // 设置css路径
		})
	],
	// 还需要设置css压缩，在webpack的优化里做optimization
	optimization:{
    
    
		 minimizer: [
	      new CssMinimizerPlugin(), // css压缩 需要将环境配置成production
	    ],
	}
}

// js的降级  babel-loader @babel/core @babel/preset-env
// @babel/plugin-transform-runtime @babel/runtime
// .babelrc 文件中配置 需要在webpack的rules开启loader规则解析
{
    
    
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
    
    
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}