vue.config.js关于webpack的基础配置

1、主要配置分为7个部分：mode、entry、output、module、plugins、devSever、optimization

mode：环境模式（development：开发环境、production：生产环境）

entry：入口配置

output：输出配置，配置打包后的文件名称及存放路径

module：配置依赖，需使用什么依赖来编译需要打包的文件

plugins（插件）配置

热加载（实现js、css的自动更新）

点击查看代码

const path = require('path')
// const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyPlugin = require('copy-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  configureWebpack: {
    // 环境模式:
    // 开发环境，打包时代码不压缩，默认开启调试模式
    mode: 'development',
    // 生产环境，打包发布到线上的，默认开启代码压缩，代码混淆，未开启代码调试
    // mode: 'production'
    // 打包时的入口文件路径，即从哪个路径进行打包,webpack以js文件为入口文件
    entry: './src/main.js',
    // 打包时的出口路径，即打包好后的文件路径
    output: {
      // 输出的目录，与webpack.config.js对比,如不生成在当前目录,输出目录需给全路径
      // path: path.join(__dirname, 'dist'),
      // __dirname为node对象，即当前目录
      path: path.join(__dirname, 'dist'),
      // js文件打包好后的文件名及位置，[name]指向entry中的key值，此时是main
      filename: 'js/[name].bundle.js'
    },
    module: {
      rules: [
      //   // js配置
        {
          // 匹配js文件
          test: /\.js$/,
          // 该文件夹下js无需打包，即配置无需打包的js文件路径
          exclude: /node_modules/,
          use: [
            {
              // babel-loader编译js文件，需安装babel-loader、babel-core
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    'env', {
                      'modules': false,
                      'target': {
                        // 浏览器兼容的配置
                        'browsers': [ '>1%', 'last 2 versions' ]
                      }
                    }
                  ]
                ]
              }
            }
          ]
        },
        // css配置
        {
          // 推荐
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'style-loader',
              options: {
                // 是否只创建一个style标签，默认false，相同格式的文件对应只创建一个style标签
                singleton: true
              }
            },
            {
            //   // 将css写入js文件
              loader: 'css-loader',
              options: {
                // 开启则可用css module语法
                modules: true
              }
            },
            {
              // 装postcss-loader、autoprefixer，给css自动加前缀满足浏览器的兼容性
              loader: 'postcss-loader',
              options: {
                plugins: [
                  require('autoprefixer')({
                    browsers: ['last 10 versions']
                  })
                ]
              }
            }
          ]
        },
        // // sass配置
        {
          // sass配置需要装node-sass、sass-loader，如用less或stylus，只装less-loader或stylus-loader
          test: /\.sass$/,
          loader: 'style-loader!css-loader'
        },
        // // 图片配置，file-loader于url-loader二者选一即可
        {
          test: /\.(png|jpg|jpeg|gif")$/,
          use: [
            // {
            //   // 打包引用路径的地址
            //   loader: 'file-loader',
            //   options: {
            //     // 图片打包后的名称及各式
            //     name: '[name].[text]',
            //     // 图片打包后放置的目录
            //     outputPath: 'imgs/',
            //     // 需指定该路径(根据自己需求配置),否则打包出来后，css背景图片的路径会出错
            //     publicPath: '../img'
            //   }
            // },
            {
              // 打包出base64链接地址
              loader: 'url-loader',
              options: {
                // 图片小于100k时用url-loader打包
                limit: 100000,
                outputPath: 'imgs/'
              }
            },
            {
              // 压缩图片
              loader: 'img-loader',
              options: {
                pngquant: {
                  // png格式压缩质量
                  quality: 80
                }
              }
            }
          ]
        },
        // // 字体文件配置
        {
          test: /\.(eot|woff2?|ttf|svg)$/,
          loader: 'url-loader'
        }
        // // html中引入图片配置（webpack4自动匹配打包后的图片路径，也就是打包后的页面中引入的图片路径是正确的）
        // {
        //   test: /\.html$/i,
        //   use: [
        //     {
        //       // 需装html-loader
        //       loader: 'html-loader',
        //       options: {
        //         attrs: [ 'img:src', 'img:data-src' ]
        //       }
        //       // 更多参数配置请查看html-loader的GitHub
        //     }
        //   ]
        // }
      ]
    },
    devServer: {
      host: 'localhost',
      // 开发时默认打开的端口
      port: 8080,
      open: true,
      proxy: {
        // 将以/api开头的请求接口替换成/请求
        '/api': {
          // 代理的目标地址baseUrl
          target: 'https://wwww.baidu.com',
          // 接口跨域时需要开启
          changeOrigin: true,
          // 重写url
          pathRewrite: {
            '^/api': '/' // https://www.baidu.com/接口
          }
        },
        // 将以/apiProxy开头的请求接口替换成/api请求
        '/apiProxy': {
          target: 'https://www.baidu.com',
          changeOrigin: true,
          pathRewrite: {
            '^/apiProxy': '/api' // https://www.baidu.com/api/接口
          }
        }
      }
    },
    plugins: [
      // 需装生成html页面插件：html-webpack-plugin
      // new HtmlWebpackPlugin({
      // 按照那个文件进行生成html，默认是压缩后的html文件
      //   template: './public/index.html'
      // }),
      // 清除打包后的文件
      new CleanWebpackPlugin(),
      // new CopyPlugin([
      //   {
      //     // 将src下的assets下的文件夹下的静态文件拷贝到dist下的statics文件夹下，包括路径
      //     from: 'src/assets/**/*',
      //     to: 'statics',
      //   }
      // ]),
      // 全局引入jquery库
      // new webpack.ProvidePlugin({
      //   $: 'jquery',
      //   jquery: 'jquery'
      // })
      new MiniCssExtractPlugin({
        // 入口文件引入的css全局样式会合成一个css
        filename: 'css/[name].min.css'
      })
    ]
  }
}