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'
      })
    ]
  }
}