let comment = [
  "style-loader",
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      postcssOptions: {
        plugins: ["postcss-preset-env"],
      },
    },
  },]module.exports = {
  module: {
    rules: [
      {
        test: /.css/,
        use: [...comment],
      },
      {
        test: /.less$/,
        use: [...comment, "less-loader"],
      },
    ],
  },}

module.exports = {
 entry:['@babel/polyfill','./src/index.js']
 ...
 module:{
  rules:[
    {
    test:/.js$/,
    use:[
        {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
            // 或者
            presets:[['env',{module:false}]]
          }
        }
      ]
    }
  ]
 }}

 module.exports = {
  ...
  module:{
    rules:[
      {
        test:/.(png|jpg|gif)$/,
        use:[
          {
          loader:file-loader,
          options:{
          limit:4 *1024,
          name:'img/[name]_[hash:10].[ext]'
          }
          }
        ]
      },
      {
        test:/.html$/,
        loader:'html-loader'
      }
    ]
  }
 }

 module.exports = {
  ...
  module:{
  rules:[
      {
        test:/.vue$/,
        loader:'vue-loader'
      },
      {
        test:/.css$/,
        use:[
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
 }

const VueLoaderPlugin = require("vue-loader/lib/plugin") // vue-loader 是webpack的加载器，允许你以单文件组件的格式编写vue组件const { DefinePlugin } = require("webpack") // webpack 内置插件，用于创建编译时可以配置的全局常量const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin") // 用于强制所有默认的完整路径必须与磁盘上实际路径的确切大小写相匹配const FriendlyErrorsPlugin = require("friendly-error-webpack-plugin") //识别某些类型的webpack错误并整理，以提供开发人员更好的体验。const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 将css 提取到单独的文件中，为每个包含css的js文件创建一个css文件const { HashedModuleIdsPLugin } = require("webpack") // webpack内置插件，用于根据模块的相对路径生成hash作为模块id，一般用于生产环境const HtmlWebpackPlugin = require("html-webpack-plugin") //用于根据模块或使用加载器生成HTML文件const PreloadPlugin = require("preload-webpack-plugin") // 用于在使用html-webpack-plugin生成的html中添加<link rel="preload" >或<link rel="prefetch">，有助于异步加载const CopyWebpackPlugin = require("copy-webpack-plugin") //用于将单个文件或整个目录复制到构建目录module.exports = {
  plugins: [
    new VueLoaderPlugin(),
    new DefinePlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new OptimizeCssnanoPlugin(),
    new OptimizeCssnanoPlugin(),
    new HtmlWebpackPlugin(),
    new PreloadPlugin(),
    new CopyWebpackPlugin(),
  ],}

  module.exports = {
    ...
    chainWebpack: config => {// config 参数为已经解析好的 webpack配置
      config.resolve.alias      .set('@', resolve('src'))
      .set('static', resolve('static'))
    }
    ...
  }

module.exports = {
  // config 参数为已经解析好的webpack配置
  configureWebpack: (config) => {
    // config.plugins = [];//这样会直接将plugins置空
    return {
      plugins: [], // 使用return 一个对象会通过 webpack-merge进行合并，plugins不会置空
    }
  },}

module.exports = {
  devServer: {
    compress: true, //开发服务器是否启动gzip等压缩
    host: "localhost", //开发服务器监听的主机地址
    hot: true,
    hotOnly: true, // 热更新
    https: false, // https:{type:Boolean}
    open: true,
    overlay: {
      errors: true, // 让浏览器 overlay 同时显示警告和错误
      warnings: false,
    },
    port: 8090, //开发服务器监听的端口
    proxy: {
      //配置不同的后台API地址
      "/api": {
        target: "http://localhost:8090",
        ws: false, //是否开启websocket
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "/mock",
        },
      },
    },
    before(app) {
      // mock数据
    },
  },}

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 192,
            // unitPrecision: 5,
            propList: ["*"],
            // selectorBlackList: [],
            // replace: true,
            mediaQuery: false,
            minPixelValue: 3,
            exclude: /node_modules/i,
          }),
        ],
      },
    },
  },}