webpack.config.js整体配置(基础)

webpack.config.js整体配置

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  mode: 'production',
  entry: {
    index: './src/js/index.js',
    project1: './src/js/show.js',
    about: './src/js/about.js'
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build', 'js')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        //css兼容
        'postcss-loader'
      ]
    }, {
      test: /\.TTF$/,
      loader: 'file-loader',
      options: {
        //输出文件位置
        outputPath: '../fonts',
        //打包后的路径+前缀
        publicPath: '../fonts',
        name: '[name].[ext]'
      }
    }, {
      test: /\.png$/,
      //使用一个loader
      loader: 'url-loader', //会基于file-loader
      options: {
        outputPath: '..//imgs',
        publicPath: '../imgs',
        name: '[name].[ext]',
        limit: 1024 * 16
      }
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
        //预设:指示babel做怎样的兼容处理
        presets: [
          [ //预设包
            '@babel/preset-env',
            {
              //按需加载
              useBuiltIns: 'usage',
              //指定corejs版本
              corejs: {
                version: 3
              },
              //指定兼容性
              targets: {
                chrome: '60',
                firefox: '50',
                ie: '9',
                safari: '10',
                edge: '17'
              }
            }
          ]
        ],
      }

    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: '../index.html',
      chunks: ['index'],
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './src/project1.html',
      filename: '../project1.html',
      chunks: ['project1'],
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './src/about.html',
      filename: '../about.html',
      chunks: ['about'],
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin({
      filename: '../css/index.css'
    }),
    new OptimizeCssAssetsWebpackPlugin()
  ]
}